<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Media Session Standard</title>
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED" rel="stylesheet" type="text/css">
  <link href="https://w3c.github.io/mediasession" rel="canonical">
<style>
  /* https://github.com/tabatkins/bikeshed/issues/485 */
  .example .self-link { display: none; }
</style>
<style>
table {
  border-collapse: collapse;
  border-left-style: hidden;
  border-right-style: hidden;
  text-align: left;
}
table caption {
  font-weight: bold;
  padding: 3px;
  text-align: left;
}
table td, table th {
  border: 1px solid black;
  padding: 3px;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">Media Session Standard</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://w3c.github.io/mediasession">https://w3c.github.io/mediasession</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="45389"><a class="p-name fn u-email email" href="mailto:mlamouri@google.com">Mounir Lamouri</a> (<span class="p-org org">Google Inc.</span>)
     <dd class="editor p-author h-card vcard" data-editor-id="103353"><a class="p-name fn u-email email" href="mailto:beccahughes@google.com">Becca Hughes</a> (<span class="p-org org">Google Inc.</span>)
     <dt class="editor">Former Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:zqzhang@google.com">Zhiqiang Zhang</a> (<span class="p-org org">Google Inc.</span>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:richt@opera.com">Rich Tibbett</a> (<span class="p-org org">Opera</span>)
     <dd class="editor p-author h-card vcard"><span class="p-name fn"></span>
     <dt>Participate:
     <dd><a href="https://github.com/w3c/mediasession/">We are on GitHub</a>
     <dd><a href="https://github.com/w3c/mediasession/issues/new">File an issue</a>
     <dd><a href="https://github.com/w3c/mediasession/issues?state=open">Open issues</a>
     <dt>Version History:
     <dd><a href="https://github.com/w3c/mediasession/commits">https://github.com/w3c/mediasession/commits</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document" rel="license">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification enables web developers to show customized media

metadata on platform UI, customize available platform media
controls, and access platform media keys such as hardware keys found
on keyboards, headsets, remote controls, and software keys found in
notification areas and on lock screens of mobile devices.</p>
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> <em>This section describes the status of this document at the time of its publication. Other
    documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision of this
    technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical
    reports index</a> at http://www.w3.org/TR/.</em> </p>
   <p> This document was published by the <a href="https://www.w3.org/media-wg/">Media Working Group</a> as an Editors' Draft. This document is intended to become a W3C Recommendation.

    Feedback and comments on this specification are welcome. Please use <a href="https://github.com/w3c/mediasession/issues">Github issues</a>.
    Discussions may also be found in the <a href="http://lists.w3.org/Archives/Public/public-media-wg/">public-media-wg@w3.org archives</a>. </p>
   <p> Publication as an Editors' Draft does not imply endorsement by the <abbr title="World Wide Web Consortium">W3C</abbr> Membership. This is a draft document and may
    be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite
    this document as other than work in progress. </p>
   <p> This document was produced by a group operating under the <a href="http://www.w3.org/Consortium/Patent-Policy/"> <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="https://www.w3.org/2004/01/pp-impl/115198/status" rel="disclosure">public list of any
    patent disclosures</a> made in connection with the deliverables of the group; that page also
    includes instructions for disclosing a patent. An individual who has actual knowledge of a
    patent which the individual believes contains <a href="http://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential
    Claim(s)</a> must disclose the information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#conformance"><span class="secno">2</span> <span class="content">Conformance</span></a>
    <li><a href="#dependencies"><span class="secno">3</span> <span class="content">Dependencies</span></a>
    <li>
     <a href="#security-privacy-considerations"><span class="secno">4</span> <span class="content">Security and Privacy
  Considerations</span></a>
     <ol class="toc">
      <li><a href="#user-interface-guidelines"><span class="secno">4.1</span> <span class="content">User interface guidelines</span></a>
      <li><a href="#incognito-mode-privacy"><span class="secno">4.2</span> <span class="content">Incognito mode</span></a>
      <li><a href="#media-session-actions-privacy"><span class="secno">4.3</span> <span class="content">Media Session Actions</span></a>
     </ol>
    <li>
     <a href="#model"><span class="secno">5</span> <span class="content">Model</span></a>
     <ol class="toc">
      <li><a href="#playback-state-model"><span class="secno">5.1</span> <span class="content">Playback State</span></a>
      <li><a href="#media-session-routing"><span class="secno">5.2</span> <span class="content">Routing</span></a>
      <li><a href="#metadata"><span class="secno">5.3</span> <span class="content">Metadata</span></a>
      <li><a href="#actions-model"><span class="secno">5.4</span> <span class="content">Actions</span></a>
      <li><a href="#position-state"><span class="secno">5.5</span> <span class="content">Position State</span></a>
     </ol>
    <li><a href="#the-mediasession-interface"><span class="secno">6</span> <span class="content">The <code class="idl"><span>MediaSession</span></code> interface</span></a>
    <li><a href="#the-mediametadata-interface"><span class="secno">7</span> <span class="content">The <code class="idl"><span>MediaMetadata</span></code> interface</span></a>
    <li><a href="#the-mediaimage-dictionary"><span class="secno">8</span> <span class="content">The <code class="idl"><span>MediaImage</span></code> dictionary</span></a>
    <li><a href="#the-mediapositionstate-dictionary"><span class="secno">9</span> <span class="content">The <code class="idl"><span>MediaPositionState</span></code> dictionary</span></a>
    <li><a href="#the-mediasessionactiondetails-dictionary"><span class="secno">10</span> <span class="content">The <code class="idl"><span>MediaSessionActionDetails</span></code> dictionary</span></a>
    <li><a href="#examples"><span class="secno">11</span> <span class="content">Examples</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>Media is used extensively today, and the Web is one of the primary means of
consuming media content. Many platforms can display media metadata, such as
title, artist, album and album art on various UI elements such as notification,
media control center, device lockscreen and wearable devices. This specification
aims to enable web pages to specify the media metadata to be displayed in
platform UI, and respond to media controls which may come from platform UI or
media keys, thereby improving the user experience.</p>
   <h2 class="heading settled" data-level="2" id="conformance"><span class="secno">2. </span><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p>All diagrams, examples, and notes in this specification are non-normative, as
are all sections explicitly marked non-normative. Everything else in this
specification is normative.</p>
   <p>The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD",
"SHOULD NOT", "RECOMMENDED", "NOT RECOMMENDED", "MAY", and "OPTIONAL" in this
document are to be interpreted as described in RFC 2119. For readability, these
words do not appear in all uppercase letters in this specification. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
   <p>Requirements phrased in the imperative as part of algorithms (such as "strip any
leading space characters" or "return false and terminate these steps") are to be
interpreted with the meaning of the key word ("must", "should", "may", etc) used
in introducing the algorithm.</p>
   <p>Conformance requirements phrased as algorithms or specific steps may be
implemented in any manner, so long as the end result is equivalent. (In
particular, the algorithms defined in this specification are intended to be easy
to follow, and not intended to be performant.)</p>
   <p>User agents may impose implementation-specific limits on otherwise unconstrained
inputs, e.g. to prevent denial of service attacks, to guard against running out
of memory, or to work around platform-specific limitations.</p>
   <p>When a method or an attribute is said to call another method or attribute, the
user agent must invoke its internal API for that attribute or method so that
e.g. the author can’t change the behavior by overriding attributes or methods
with custom properties or functions in JavaScript.</p>
   <p>Unless otherwise stated, string comparisons are done in a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitivity-and-string-comparison" id="ref-for-case-sensitivity-and-string-comparison">case-sensitive</a> manner.</p>
   <h2 class="heading settled" data-level="3" id="dependencies"><span class="secno">3. </span><span class="content">Dependencies</span><a class="self-link" href="#dependencies"></a></h2>
   <p>The IDL fragments in this specification must be interpreted as required for
conforming IDL fragments, as described in the Web IDL specification. <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a></p>
   <section>
    <h2 class="heading settled" data-level="4" id="security-privacy-considerations"><span class="secno">4. </span><span class="content">Security and Privacy
  Considerations</span><a class="self-link" href="#security-privacy-considerations"></a></h2>
    <p><em>This section is non-normative.</em></p>
    <p> The API introduced in this specification has very low impact with regards to
    security and privacy. Part of the API allows a website to expose metadata
    that can be used by the user agent. The user agent obviously needs to use
    this data with care. Another part of the API allows a website to receive
    commands from the user via buttons or other form of controls which might
    sometimes introduce a new input layer between the user and the website. </p>
    <section>
     <h3 class="heading settled" data-level="4.1" id="user-interface-guidelines"><span class="secno">4.1. </span><span class="content">User interface guidelines</span><a class="self-link" href="#user-interface-guidelines"></a></h3>
     <p> The <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata">MediaMetadata</a></code> introduced in this specification allows a website to
      offer more information with regards to what is being played. The user
      agent is meant to use this information in any UI related to media
      playback, either internal to the user agent or within the platform. </p>
     <p> The <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①">MediaMetadata</a></code> are expected to be used in the context of media
      playback, making spoofing harder but because the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②">MediaMetadata</a></code> has
      text fields and image fields, a malicious website could try to spoof
      another website’s identity. It is recommended that the user agent offers a
      way to find the origin or clearly expose the origin of the website which
      the metadata are coming from. </p>
     <p> If a user agent offers a mechanism to go back to a website from a UI
      element created based on the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata③">MediaMetadata</a></code>, it is recommended that the
      action should not be noticeable by the website, thus reducing the chances
      of spoofing. </p>
     <p> In general, all security and privacy considerations related to the display
      of notifications from a website should apply here. It is worth noting that
      the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata④">MediaMetadata</a></code> offer less customization than regular web
      notifications, thus would be harder to spoof. </p>
    </section>
    <section>
     <h3 class="heading settled" data-level="4.2" id="incognito-mode-privacy"><span class="secno">4.2. </span><span class="content">Incognito mode</span><a class="self-link" href="#incognito-mode-privacy"></a></h3>
     <p> For privacy purposes, when in incognito mode, the user agent should be
      careful when sharing the information from <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata⑤">MediaMetadata</a></code> with the
      system and make sure they will not be used in a way that would harm the
      user. Displaying this information in a way that is very visible would be
      against the user’s intent of browsing in incognito mode. When available,
      the UI elements should be advertized as private to the platform. </p>
    </section>
    <section>
     <h3 class="heading settled" data-level="4.3" id="media-session-actions-privacy"><span class="secno">4.3. </span><span class="content">Media Session Actions</span><a class="self-link" href="#media-session-actions-privacy"></a></h3>
     <p> <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action">Media session actions</a> expose a new input layer to the web platform.
      User agents should make sure users are aware that their actions might be
      routed to the website with the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session">active media session</a>. Especially,
      when the actions are coming from remote devices such as a headset or other
      remote device. It is recommended for the user agent to follow the platform
      conventions when listening to these inputs in order to facilitate the user
      understanding. </p>
    </section>
   </section>
   <section>
    <h2 class="heading settled" data-level="5" id="model"><span class="secno">5. </span><span class="content">Model</span><a class="self-link" href="#model"></a></h2>
    <section>
     <h3 class="heading settled" data-level="5.1" id="playback-state-model"><span class="secno">5.1. </span><span class="content">Playback State</span><a class="self-link" href="#playback-state-model"></a></h3>
     <p> In order to make <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play">play</a> and <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause">pause</a> actions work properly,
      the user agent SHOULD be able to determine if a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a> of
      the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①">active media session</a> is playing media or not, which is called
      the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="guessed-playback-state">guessed playback state</dfn>. The RECOMMENDED way for determining
      the <a data-link-type="dfn" href="#guessed-playback-state" id="ref-for-guessed-playback-state">guessed playback state</a> is to monitor the media elements whose
      node document’s browsing context is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①">browsing context</a>. The <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context②">browsing context</a>’s <a data-link-type="dfn" href="#guessed-playback-state" id="ref-for-guessed-playback-state①">guessed playback state</a> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing">playing</a> if any of them is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#potentially-playing" id="ref-for-potentially-playing">potentially playing</a> and not <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#concept-media-muted" id="ref-for-concept-media-muted">muted</a>, and is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-paused" id="ref-for-dom-mediasessionplaybackstate-paused">paused</a> otherwise. Other information
      SHOULD also be considered, such as WebAudio and plugins. </p>
     <p> The <a class="idl-code" data-link-type="attribute" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate">playbackState</a> attribute specifies
      the <a data-link-type="dfn" href="#declared-playback-state" id="ref-for-declared-playback-state">declared playback state</a> from the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context③">browsing context</a>. The
      state is combined with the <a data-link-type="dfn" href="#guessed-playback-state" id="ref-for-guessed-playback-state②">guessed playback state</a> to compute the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="actual-playback-state">actual playback state</dfn>, which is a finalized state and will be
      used for <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play①">play</a> and <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause①">pause</a> actions. </p>
     <p> The <a data-link-type="dfn" href="#actual-playback-state" id="ref-for-actual-playback-state">actual playback state</a> is computed in the following way: </p>
     <ul>
      <li> If the <a data-link-type="dfn" href="#declared-playback-state" id="ref-for-declared-playback-state①">declared playback state</a> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing①">playing</a>, return <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing②">playing</a>. 
      <li> Otherwise, return the <a data-link-type="dfn" href="#guessed-playback-state" id="ref-for-guessed-playback-state③">guessed playback state</a>. 
     </ul>
     <p></p>
     <p class="note" role="note"> The <code class="idl"><a data-link-type="idl" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate①">playbackState</a></code> attribute could be useful when the page
      wants to do some preparation steps when the media is paused but it allows
      the preparation steps to be interrupted by <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause②">pause</a> action. See <a href="#example-set-playbackState">Setting playbackState</a> for example. </p>
     <p> When the <a data-link-type="dfn" href="#actual-playback-state" id="ref-for-actual-playback-state①">actual playback state</a> of the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session②">active media session</a> changes, the user agent MUST run the <a data-link-type="dfn" href="#media-session-actions-update-algorithm" id="ref-for-media-session-actions-update-algorithm">media session actions update
      algorithm</a>. </p>
    </section>
    <section>
     <h3 class="heading settled" data-level="5.2" id="media-session-routing"><span class="secno">5.2. </span><span class="content">Routing</span><a class="self-link" href="#media-session-routing"></a></h3>
     <p>There could be multiple <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession">MediaSession</a></code> objects existing at the same time
    since the user agent could have multiple tabs, each tab could contain a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context" id="ref-for-top-level-browsing-context">top-level browsing context</a> and multiple <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context" id="ref-for-nested-browsing-context">nested browsing
    contexts</a>, and each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context④">browsing context</a> could have a <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①">MediaSession</a></code> object.</p>
     <p>The user agent MUST select at most one of the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession②">MediaSession</a></code> objects to
    present to the user, which is called the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="active-media-session">active media session</dfn>.
    The <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session③">active media session</a> may be null. The selection is up to the user
    agent and SHOULD be based on preferred user experience. Note that the <code class="idl"><a data-link-type="idl" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate②">playbackState</a></code> attribute MUST not affect media session
    routing. It only takes effect for the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session④">active media session</a>.</p>
     <p>It is RECOMMENDED that the user agent selects the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session⑤">active media
    session</a> by managing <a data-link-type="dfn" href="#audio-focus" id="ref-for-audio-focus">audio focus</a>. A tab or <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context⑤">browsing context</a> is said to have <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="audio-focus">audio focus</dfn> if it is currently playing audio or
    the user expects to control the media in it. The AudioFocus API targets this
    area and could be used once it’s finished.</p>
     <p>Whenever the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session⑥">active media session</a> is changed, the user agent MUST run
    the <a data-link-type="dfn" href="#media-session-actions-update-algorithm" id="ref-for-media-session-actions-update-algorithm①">media session actions update algorithm</a> and the <a data-link-type="dfn" href="#update-metadata-algorithm" id="ref-for-update-metadata-algorithm">update metadata
    algorithm</a>.</p>
    </section>
    <section>
     <h3 class="heading settled" data-level="5.3" id="metadata"><span class="secno">5.3. </span><span class="content">Metadata</span><a class="self-link" href="#metadata"></a></h3>
     <p>The media metadata for the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session⑦">active media session</a> MAY be displayed in
    the platform UI depending on platform conventions. Whenever the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session⑧">active
    media session</a> changes or setting <a class="idl-code" data-link-type="attribute" href="#dom-mediasession-metadata" id="ref-for-dom-mediasession-metadata"><code>metadata</code></a> of the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session⑨">active media
    session</a>, the user agent MUST run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="update metadata algorithm" data-noexport id="update-metadata-algorithm">update metadata
    algorithm</dfn>. The steps are as follows:</p>
     <ol>
      <li> If the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①⓪">active media session</a> is null, unset the media metadata
        presented to the platform, and terminate these steps. 
      <li> If the <a class="idl-code" data-link-type="attribute" href="#dom-mediasession-metadata" id="ref-for-dom-mediasession-metadata①"><code>metadata</code></a> of the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①①">active media session</a> is an <a data-link-type="dfn" href="#empty-metadata" id="ref-for-empty-metadata">empty metadata</a>, unset the media
        metadata presented to the platform, and terminate these steps. 
      <li> Update the media metadata presented to the platform to match the <a class="idl-code" data-link-type="attribute" href="#dom-mediasession-metadata" id="ref-for-dom-mediasession-metadata②"><code>metadata</code></a> for the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①②">active media session</a>. 
      <li> If the user agent wants to display an <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images">artwork image</a>, it is
        RECOMMENDED to run the <a data-link-type="dfn" href="#fetch-image-algorithm" id="ref-for-fetch-image-algorithm">fetch image algorithm</a>. 
     </ol>
     <p>The RECOMMENDED <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fetch-image-algorithm">fetch image algorithm</dfn> is as follows:</p>
     <ol>
      <li> If there are other <a data-link-type="dfn" href="#fetch-image-algorithm" id="ref-for-fetch-image-algorithm①">fetch image algorithms</a> running, cancel
        existing algorithm execution instances. 
      <li> If <var>metadata</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-mediametadata-artwork" id="ref-for-dom-mediametadata-artwork"><code>artwork</code></a> of the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①③">active media
        session</a> is empty, then terminate these steps. 
      <li> If the platform supports displaying media artwork, select a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="preferred-artwork-image">preferred artwork image</dfn> from <var>metadata</var>’s <a class="idl-code" data-link-type="attribute" href="#dom-mediametadata-artwork" id="ref-for-dom-mediametadata-artwork①"><code>artwork</code></a> of the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①④">active
        media session</a>. 
      <li>
        <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch" title="fetch">Fetch</a> the <a data-link-type="dfn" href="#preferred-artwork-image" id="ref-for-preferred-artwork-image">preferred artwork image</a>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src">src</a></code>. 
       <p>Then, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>:</p>
       <ol>
        <li> Wait for the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response">response</a>. 
        <li> If the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response①">response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-internal-response" id="ref-for-concept-internal-response">internal response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-type" id="ref-for-concept-response-type">type</a> is <i>default</i>, attempt to decode the resource as
            an image. 
        <li> If the image format is supported, use the image as the artwork for
            display in platform UI. Otherwise the <a data-link-type="dfn" href="#fetch-image-algorithm" id="ref-for-fetch-image-algorithm②">fetch image algorithm</a> fails and terminates. 
       </ol>
     </ol>
     <p>If no images are fetched in the <a data-link-type="dfn" href="#fetch-image-algorithm" id="ref-for-fetch-image-algorithm③">fetch image algorithm</a>, the user agent
    MAY have fallback behavior such as displaying a default image as artwork.</p>
    </section>
    <section>
     <h3 class="heading settled" data-level="5.4" id="actions-model"><span class="secno">5.4. </span><span class="content">Actions</span><a class="self-link" href="#actions-model"></a></h3>
     <p> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="media-session-action">media session action</dfn> is an action that the page can handle in
      order for the user to interact with the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession③">MediaSession</a></code>. For example, a
      page can handle some actions that will then be triggered when the user
      presses buttons from a headset or other remote device. </p>
     <p> A <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="media session action source" data-noexport id="media-session-action-source" title="media session action source">media session action
      source</dfn> is a source that might produce a <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action①">media session action</a>.
      Such a source can be the platform or the UI surfaces created by the user
      agent. </p>
     <p> A <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action②">media session action</a> is represented by a <code class="idl"><a data-link-type="idl" href="#enumdef-mediasessionaction" id="ref-for-enumdef-mediasessionaction">MediaSessionAction</a></code> which can have one of the following value: </p>
     <ul>
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;play&quot;|play" id="dom-mediasessionaction-play"><code>play</code></dfn>: the action intent
          is to resume the playback. 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;pause&quot;|pause" id="dom-mediasessionaction-pause"><code>pause</code></dfn>: the action intent
          is to pause the currently active playback. 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;seekbackward&quot;|seekbackward" id="dom-mediasessionaction-seekbackward"><code>seekbackward</code></dfn>: the action
          intent is to move the playback time backward by a short period (eg. a
          few seconds). 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;seekforward&quot;|seekforward" id="dom-mediasessionaction-seekforward"><code>seekforward</code></dfn>: the action
          intent is to move the playback time forward by a short period (eg. a
          few seconds). 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;previoustrack&quot;|previoustrack" id="dom-mediasessionaction-previoustrack"><code>previoustrack</code></dfn>: the action
          intent is to either start the current playback from the beginning if
          the playback has a notion of beginning, or move to the previous item
          in the playlist if the playback has a notion of playlist. 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;nexttrack&quot;|nexttrack" id="dom-mediasessionaction-nexttrack"><code>nexttrack</code></dfn>: the action is
          to move to the playback to the next item in the playlist if the
          playback has a notion of playlist. 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;skipad&quot;|skipad" id="dom-mediasessionaction-skipad"><code>skipad</code></dfn>: the action intent
          is to skip the advertisement that is currently playing. 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;stop&quot;|stop" id="dom-mediasessionaction-stop"><code>stop</code></dfn>: the action intent
          is to stop the playback and clear the state if appropriate. 
      <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionAction" data-dfn-type="enum-value" data-export data-lt="&quot;seekto&quot;|seekto" id="dom-mediasessionaction-seekto"><code>seekto</code></dfn>: the action intent
          is to move the playback time to a specific time. 
     </ul>
     <p></p>
     <p> All <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession④">MediaSession</a></code>s have a map of <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="supported media session actions" data-noexport id="supported-media-session-actions">supported media session
      actions</dfn> with, as a key, a <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action③">media session action</a> and as a value
      a <code class="idl"><a data-link-type="idl" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler">MediaSessionActionHandler</a></code>. </p>
     <p> When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="update-action-handler-algorithm">update action handler algorithm</dfn> on a given <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession⑤">MediaSession</a></code> with <var>action</var> and <var>handler</var> parameters
      is invoked, the user agent MUST run the following steps: </p>
     <ol>
      <li> If <var>handler</var> is <code>null</code>, remove <var>action</var> from the <a data-link-type="dfn" href="#supported-media-session-actions" id="ref-for-supported-media-session-actions">supported media session actions</a> for <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession⑥">MediaSession</a></code> and abort these steps. 
      <li> Add <var>action</var> to the <a data-link-type="dfn" href="#supported-media-session-actions" id="ref-for-supported-media-session-actions①">supported media session actions</a> for <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession⑦">MediaSession</a></code> and associate to it the <var>handler</var>. 
     </ol>
     <p></p>
     <p> When the <a data-link-type="dfn" href="#supported-media-session-actions" id="ref-for-supported-media-session-actions②">supported media session actions</a> are changed, the user
      agent SHOULD run the <a data-link-type="dfn" href="#media-session-actions-update-algorithm" id="ref-for-media-session-actions-update-algorithm②">media session actions update algorithm</a>. The
      user agent MAY <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">queue a task</a> in order to run the <a data-link-type="dfn" href="#media-session-actions-update-algorithm" id="ref-for-media-session-actions-update-algorithm③">media session
      actions update algorithm</a> in order to avoid UI flickering when multiple
      actions are modified in the same event loop. </p>
     <p> When the user agent is notified by a <a data-link-type="dfn" href="#media-session-action-source" id="ref-for-media-session-action-source">media session action source</a> that a <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action④">media session action</a> named <var>action</var> has been triggered,
      the user agent MUST run the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="handle-media-session-action">handle media session action</dfn> steps
      as follows and consider it <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation" id="ref-for-triggered-by-user-activation">triggered by user activation</a>: </p>
     <ol>
      <li> If the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①⑤">active media session</a> is <code>null</code>, abort these
          steps. 
      <li> Let <var>actions</var> be the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①⑥">active media session</a>’s <a data-link-type="dfn" href="#supported-media-session-actions" id="ref-for-supported-media-session-actions③">supported media session actions</a>. 
      <li> If <var>actions</var> does not contain the key <var>action</var>,
          abort these steps. 
      <li> Let <var>handler</var> be the <code class="idl"><a data-link-type="idl" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler①">MediaSessionActionHandler</a></code> associated
          with the key <var>action</var> in <var>actions</var>. 
      <li>
        Run <var>handler</var> with the <var>details</var> parameter set to: 
       <ul>
        <li> <code class="idl"><a data-link-type="idl" href="#dictdef-mediasessionseekactiondetails" id="ref-for-dictdef-mediasessionseekactiondetails">MediaSessionSeekActionDetails</a></code> if <var>action</var> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekbackward" id="ref-for-dom-mediasessionaction-seekbackward">seekbackward</a> or <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekforward" id="ref-for-dom-mediasessionaction-seekforward">seekforward</a>. 
        <li> <code class="idl"><a data-link-type="idl" href="#dictdef-mediasessionseektoactiondetails" id="ref-for-dictdef-mediasessionseektoactiondetails">MediaSessionSeekToActionDetails</a></code> if <var>action</var> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekto" id="ref-for-dom-mediasessionaction-seekto">seekto</a>. 
        <li> Otherwise, with <code class="idl"><a data-link-type="idl" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails">MediaSessionActionDetails</a></code>. 
       </ul>
     </ol>
     <p></p>
     <p> When the user agent receives a joint command for <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play②">play</a> and <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause③">pause</a>, such as a headset button click, it MUST
      run the following steps: </p>
     <ol>
      <li> If the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①⑦">active media session</a> is <code>null</code>, abort these
          steps. 
      <li> Let <var>action</var> be a <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action⑤">media session action</a>. 
      <li> If the <a data-link-type="dfn" href="#actual-playback-state" id="ref-for-actual-playback-state②">actual playback state</a> of the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①⑧">active media session</a> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing③">playing</a>, set <var>action</var> to <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause④">pause</a>. 
      <li> Otherwise, set <var>action</var> to <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play③">play</a>. 
      <li> Run the <a data-link-type="dfn" href="#handle-media-session-action" id="ref-for-handle-media-session-action">handle media session action</a> steps with <var>action</var>. 
     </ol>
     <p></p>
     <p> It is RECOMMENDED for user agents to implement a default handler for the <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play④">play</a> and <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause⑤">pause</a> <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action⑥">media session actions</a> if none was
      provided for the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session①⑨">active media session</a>. </p>
     <p class="note" role="note"> A page should only register a <code class="idl"><a data-link-type="idl" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler②">MediaSessionActionHandler</a></code> for a <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action⑦">media
      session action</a> when it can handle the action given that the user agent
      will list this as a <a data-link-type="dfn" href="#supported-media-session-actions" id="ref-for-supported-media-session-actions④">supported media session action</a> and update the <a data-link-type="dfn" href="#media-session-action-source" id="ref-for-media-session-action-source①">media session action sources</a>. </p>
     <p> When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="media-session-actions-update-algorithm">media session actions update algorithm</dfn> is invoked, the
      user agent MUST run the following steps: </p>
     <ol>
      <li> Let <var>available actions</var> be an array of <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action⑧">media session
          actions</a>. 
      <li> If the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session②⓪">active media session</a> is null, set <var>available
          actions</var> to the empty array. 
      <li> Otherwise, set the <var>available actions</var> to the list of keys
          available in the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session②①">active media session</a>’s <a data-link-type="dfn" href="#supported-media-session-actions" id="ref-for-supported-media-session-actions⑤">supported media
          session actions</a>. 
      <li>
        For each <a data-link-type="dfn" href="#media-session-action-source" id="ref-for-media-session-action-source②">media session action source</a> <var>source</var>, run the
          following substeps: 
       <ol>
        <li>
          Optionally, if the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session②②">active media session</a> is not null: 
         <ol>
          <li> If the <a data-link-type="dfn" href="#active-media-session" id="ref-for-active-media-session②③">active media session</a>’s <a data-link-type="dfn" href="#actual-playback-state" id="ref-for-actual-playback-state③">actual playback
                  state</a> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing④">playing</a>, remove <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play⑤">play</a> from <var>available
                  actions</var>. 
          <li> Otherwise, remove <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause⑥">pause</a> from <var>available
                  actions</var>. 
         </ol>
        <li> If the <var>source</var> is a UI element created by the user
              agent, it MAY remove some elements from <var>available
              actions</var> if there are too many of them compared to the
              available space. 
        <li> Notify the <var>source</var> with the updated list of <var>available actions</var>. 
       </ol>
     </ol>
     <p></p>
    </section>
    <section>
     <h3 class="heading settled" data-level="5.5" id="position-state"><span class="secno">5.5. </span><span class="content">Position State</span><a class="self-link" href="#position-state"></a></h3>
     <p> A user agent MAY display the <a data-link-type="dfn" href="#current-playback-position" id="ref-for-current-playback-position">current playback position</a> and <a data-link-type="dfn" href="#duration" id="ref-for-duration">duration</a> of a media session in the platform UI depending on platform conventions.
      The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="position-state①">position state</dfn> is the combination of the following: </p>
     <ul>
      <li> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="duration">duration</dfn> of the media in seconds. 
      <li> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="playback-rate">playback rate</dfn> of the media. It is a coefficient. 
      <li> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="last-reported-playback-position">last reported playback position</dfn> of the media. This is
          the playback position of the media in seconds when the <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①">position
          state</a> was created. 
     </ul>
     <p></p>
     <p> The <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①①">position state</a> is represented by a <code class="idl"><a data-link-type="idl" href="#dictdef-mediapositionstate" id="ref-for-dictdef-mediapositionstate">MediaPositionState</a></code> which
      MUST always be stored with the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="last-position-updated-time">last position updated time</dfn>. This
      is the time the <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①②">position state</a> was last updated in seconds. </p>
     <p> The RECOMMENDED way to determine the <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①③">position state</a> is to monitor
      the media elements whose node document’s browsing context is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context⑥">browsing context</a>. </p>
     <p> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="actual-playback-rate">actual playback rate</dfn> is a coefficient computed in the
      following way: </p>
     <ul>
      <li> If the <a data-link-type="dfn" href="#actual-playback-state" id="ref-for-actual-playback-state④">actual playback state</a> is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-paused" id="ref-for-dom-mediasessionplaybackstate-paused①">paused</a>, then return zero. 
      <li> Return <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate">playback rate</a>. 
     </ul>
     <p></p>
     <p> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-playback-position">current playback position</dfn> in seconds is computed in the
      following way: </p>
     <ul>
      <li> Set <var>time elapsed</var> to the system time in seconds minus the <a data-link-type="dfn" href="#last-position-updated-time" id="ref-for-last-position-updated-time">last position updated time</a>. 
      <li> Mutliply <var>time elapsed</var> with <a data-link-type="dfn" href="#actual-playback-rate" id="ref-for-actual-playback-rate">actual playback rate</a>. 
      <li> Set <var>position</var> to <var>time elapsed</var> added to <a data-link-type="dfn" href="#last-reported-playback-position" id="ref-for-last-reported-playback-position">last reported playback position</a>. 
      <li> If <var>position</var> is less than zero, return zero. 
      <li> If <var>position</var> is greater than <a data-link-type="dfn" href="#duration" id="ref-for-duration①">duration</a>, return <a data-link-type="dfn" href="#duration" id="ref-for-duration②">duration</a>. 
      <li> Return <var>position</var>. 
     </ul>
     <p></p>
    </section>
   </section>
   <h2 class="heading settled" data-level="6" id="the-mediasession-interface"><span class="secno">6. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession⑧">MediaSession</a></code> interface</span><a class="self-link" href="#the-mediasession-interface"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator"><c- g>Navigator</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#mediasession" id="ref-for-mediasession⑨"><c- n>MediaSession</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="MediaSession" href="#dom-navigator-mediasession" id="ref-for-dom-navigator-mediasession"><c- g>mediaSession</c-></a>;
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-mediasessionplaybackstate"><code><c- g>MediaSessionPlaybackState</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-none" id="ref-for-dom-mediasessionplaybackstate-none"><c- s>"none"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-paused" id="ref-for-dom-mediasessionplaybackstate-paused②"><c- s>"paused"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing⑤"><c- s>"playing"</c-></a>
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-mediasessionaction"><code><c- g>MediaSessionAction</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play⑥"><c- s>"play"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause⑦"><c- s>"pause"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekbackward" id="ref-for-dom-mediasessionaction-seekbackward①"><c- s>"seekbackward"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekforward" id="ref-for-dom-mediasessionaction-seekforward①"><c- s>"seekforward"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-previoustrack" id="ref-for-dom-mediasessionaction-previoustrack"><c- s>"previoustrack"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-nexttrack" id="ref-for-dom-mediasessionaction-nexttrack"><c- s>"nexttrack"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-skipad" id="ref-for-dom-mediasessionaction-skipad"><c- s>"skipad"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-stop" id="ref-for-dom-mediasessionaction-stop"><c- s>"stop"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekto" id="ref-for-dom-mediasessionaction-seekto①"><c- s>"seekto"</c-></a>
};

<c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-mediasessionactionhandler"><code><c- g>MediaSessionActionHandler</c-></code></dfn> = <c- b>void</c->(<a class="n" data-link-type="idl-name" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails①"><c- n>MediaSessionActionDetails</c-></a> <dfn class="idl-code" data-dfn-for="MediaSessionActionHandler" data-dfn-type="argument" data-export id="dom-mediasessionactionhandler-details"><code><c- g>details</c-></code><a class="self-link" href="#dom-mediasessionactionhandler-details"></a></dfn>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="mediasession"><code><c- g>MediaSession</c-></code></dfn> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#mediametadata" id="ref-for-mediametadata⑥"><c- n>MediaMetadata</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="MediaMetadata?" href="#dom-mediasession-metadata" id="ref-for-dom-mediasession-metadata③"><c- g>metadata</c-></a>;

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-mediasessionplaybackstate" id="ref-for-enumdef-mediasessionplaybackstate"><c- n>MediaSessionPlaybackState</c-></a> <a class="idl-code" data-link-type="attribute" data-type="MediaSessionPlaybackState" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate③"><c- g>playbackState</c-></a>;

  <c- b>void</c-> <dfn class="idl-code" data-dfn-for="MediaSession" data-dfn-type="method" data-export data-lt="setActionHandler(action, handler)" id="dom-mediasession-setactionhandler"><code><c- g>setActionHandler</c-></code><a class="self-link" href="#dom-mediasession-setactionhandler"></a></dfn>(<a class="n" data-link-type="idl-name" href="#enumdef-mediasessionaction" id="ref-for-enumdef-mediasessionaction①"><c- n>MediaSessionAction</c-></a> <dfn class="idl-code" data-dfn-for="MediaSession/setActionHandler(action, handler)" data-dfn-type="argument" data-export id="dom-mediasession-setactionhandler-action-handler-action"><code><c- g>action</c-></code><a class="self-link" href="#dom-mediasession-setactionhandler-action-handler-action"></a></dfn>, <a class="n" data-link-type="idl-name" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler③"><c- n>MediaSessionActionHandler</c-></a>? <dfn class="idl-code" data-dfn-for="MediaSession/setActionHandler(action, handler)" data-dfn-type="argument" data-export id="dom-mediasession-setactionhandler-action-handler-handler"><code><c- g>handler</c-></code><a class="self-link" href="#dom-mediasession-setactionhandler-action-handler-handler"></a></dfn>);

  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediasession-setpositionstate" id="ref-for-dom-mediasession-setpositionstate"><c- g>setPositionState</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-mediapositionstate" id="ref-for-dictdef-mediapositionstate①"><c- n>MediaPositionState</c-></a> <dfn class="idl-code" data-dfn-for="MediaSession/setPositionState(state), MediaSession/setPositionState()" data-dfn-type="argument" data-export id="dom-mediasession-setpositionstate-state-state"><code><c- g>state</c-></code><a class="self-link" href="#dom-mediasession-setpositionstate-state-state"></a></dfn> = {});
};
</pre>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①⓪">MediaSession</a></code> object represents a media session for a given document and
  allows a document to communicate to the user agent some information about the
  playback and how to handle it. </p>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①①">MediaSession</a></code> has an associated <dfn class="dfn-paneled" data-dfn-for="MediaSession" data-dfn-type="dfn" data-noexport id="mediasession-metadata">metadata</dfn> object represented by a <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata⑦">MediaMetadata</a></code>. It is initially <code>null</code>. </p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="Navigator" data-dfn-type="attribute" data-export id="dom-navigator-mediasession"><code>mediaSession</code></dfn> attribute
  MUST return the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①②">MediaSession</a></code> instance associated with the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator①">Navigator</a></code> object. </p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSession" data-dfn-type="attribute" data-export id="dom-mediasession-metadata"><code>metadata</code></dfn> attribute
  reflects the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①③">MediaSession</a></code>'s <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata">metadata</a>. On getting,
  it MUST return the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①④">MediaSession</a></code>'s <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata①">metadata</a>. On
  setting, it MUST run the following steps with <var>value</var> being the new
  value being set: </p>
   <ol>
    <li> If the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①⑤">MediaSession</a></code>'s <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata②">metadata</a> is not <code>null</code>, set its <a data-link-type="dfn" href="#mediametadata-media-session" id="ref-for-mediametadata-media-session">media session</a> to <code>null</code>. 
    <li> Set the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①⑥">MediaSession</a></code>'s <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata③">metadata</a> to <var>value</var>. 
    <li> If the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①⑦">MediaSession</a></code>'s <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata④">metadata</a> is not <code>null</code>, set its <a data-link-type="dfn" href="#mediametadata-media-session" id="ref-for-mediametadata-media-session①">media session</a> to the
      current <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①⑧">MediaSession</a></code>. 
    <li> <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">In parallel</a>, run the <a data-link-type="dfn" href="#update-metadata-algorithm" id="ref-for-update-metadata-algorithm①">update metadata algorithm</a>. 
   </ol>
   <p></p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSession" data-dfn-type="attribute" data-export id="dom-mediasession-playbackstate"><code>playbackState</code></dfn> attribute represents the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="declared-playback-state">declared playback state</dfn> of the <a data-link-type="dfn" href="#mediametadata-media-session" id="ref-for-mediametadata-media-session②">media
  session</a>, by which the session declares whether its <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context⑦">browsing context</a> is playing media or not. The initial value is <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-none" id="ref-for-dom-mediasessionplaybackstate-none①">none</a>. On setting, the user agent MUST set
  the IDL attribute to the new value if it is a valid <code class="idl"><a data-link-type="idl" href="#enumdef-mediasessionplaybackstate" id="ref-for-enumdef-mediasessionplaybackstate①">MediaSessionPlaybackState</a></code> value. On getting, the user agent MUST return
  the last valid value that was set. The <code class="idl"><a data-link-type="idl" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate④">playbackState</a></code> attribute is a hint for the user agent to determine whether the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context⑧">browsing
  context</a> is playing or paused. </p>
   <p class="note" role="note"> Setting <code class="idl"><a data-link-type="idl" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate⑤">playbackState</a></code> may cause the <a data-link-type="dfn" href="#actual-playback-state" id="ref-for-actual-playback-state⑤">actual playback
  state</a> to change and run the <a data-link-type="dfn" href="#media-session-actions-update-algorithm" id="ref-for-media-session-actions-update-algorithm④">media session actions update algorithm</a>. </p>
   <p> The <code class="idl"><a data-link-type="idl" href="#enumdef-mediasessionplaybackstate" id="ref-for-enumdef-mediasessionplaybackstate②">MediaSessionPlaybackState</a></code> enum is used to indicate whether a <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context⑨">browsing context</a> is playing media or not, the values are described as
  follows: </p>
   <ul>
    <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionPlaybackState" data-dfn-type="enum-value" data-export data-lt="&quot;none&quot;|none" id="dom-mediasessionplaybackstate-none"><code>none</code></dfn> means the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①⓪">browsing context</a> does not specify whether it’s playing or paused, it can only be used in
      the <code class="idl"><a data-link-type="idl" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate⑥">playbackState</a></code> attribute. 
    <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionPlaybackState" data-dfn-type="enum-value" data-export data-lt="&quot;playing&quot;|playing" id="dom-mediasessionplaybackstate-playing"><code>playing</code></dfn> means the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①①">browsing context</a> is currently playing media and it can be paused. 
    <li> <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionPlaybackState" data-dfn-type="enum-value" data-export data-lt="&quot;paused&quot;|paused" id="dom-mediasessionplaybackstate-paused"><code>paused</code></dfn> means the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context①②">browsing context</a> has paused media and it can be resumed. 
   </ul>
   <p></p>
   <p> The <dfn class="idl-code" data-dfn-for="MediaSession" data-dfn-type="method" data-export id="dom-mediasession-setactionhandler①"><code>setActionHandler()</code><a class="self-link" href="#dom-mediasession-setactionhandler①"></a></dfn> method, when
  invoked, MUST run the <a data-link-type="dfn" href="#update-action-handler-algorithm" id="ref-for-update-action-handler-algorithm">update action handler algorithm</a> with <var>action</var> and <var>handler</var> on the <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession①⑨">MediaSession</a></code>. </p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSession" data-dfn-type="method" data-export data-lt="setPositionState(state)|setPositionState()" id="dom-mediasession-setpositionstate"><code>setPositionState()</code></dfn> method, when invoked
  MUST perform the following steps: </p>
   <ul>
    <li> If the <var>state</var> is an empty dictionary then clear the <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①④">position
      state</a>. 
    <li> If the <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-duration" id="ref-for-dom-mediapositionstate-duration">duration</a> is not present
      or its value is null, throw a <a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#typeerror" id="ref-for-typeerror">TypeError</a>. 
    <li> If the <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-duration" id="ref-for-dom-mediapositionstate-duration①">duration</a> is negative,
      throw a <a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#typeerror" id="ref-for-typeerror①">TypeError</a>. 
    <li> If the <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-position" id="ref-for-dom-mediapositionstate-position">position</a> is not present
      or its value is null, set it to zero. 
    <li> If the <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-position" id="ref-for-dom-mediapositionstate-position①">position</a> is negative or
      greater than <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-duration" id="ref-for-dom-mediapositionstate-duration②">duration</a>, throw a <a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#typeerror" id="ref-for-typeerror②">TypeError</a>. 
    <li> If the <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-playbackrate" id="ref-for-dom-mediapositionstate-playbackrate">playbackRate</a> is not
      present or its value is null, set it to 1.0. 
    <li> If the <a class="idl-code" data-link-type="dict-member" href="#dom-mediapositionstate-playbackrate" id="ref-for-dom-mediapositionstate-playbackrate①">playbackRate</a> is zero
      throw a <a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#typeerror" id="ref-for-typeerror③">TypeError</a>. 
    <li> Update the <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①⑤">position state</a> and <a data-link-type="dfn" href="#last-position-updated-time" id="ref-for-last-position-updated-time①">last position updated time</a>. 
   </ul>
   <p></p>
   <h2 class="heading settled" data-level="7" id="the-mediametadata-interface"><span class="secno">7. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata⑧">MediaMetadata</a></code> interface</span><a class="self-link" href="#the-mediametadata-interface"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="mediametadata"><code><c- g>MediaMetadata</c-></code></dfn> {
  <a class="idl-code" data-link-type="constructor" href="#dom-mediametadata-mediametadata" id="ref-for-dom-mediametadata-mediametadata"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-mediametadatainit" id="ref-for-dictdef-mediametadatainit"><c- n>MediaMetadataInit</c-></a> <dfn class="idl-code" data-dfn-for="MediaMetadata/MediaMetadata(init), MediaMetadata/constructor(init), MediaMetadata/MediaMetadata(), MediaMetadata/constructor()" data-dfn-type="argument" data-export id="dom-mediametadata-mediametadata-init-init"><code><c- g>init</c-></code><a class="self-link" href="#dom-mediametadata-mediametadata-init-init"></a></dfn> = {});
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-mediametadata-title" id="ref-for-dom-mediametadata-title"><c- g>title</c-></a>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-mediametadata-artist" id="ref-for-dom-mediametadata-artist"><c- g>artist</c-></a>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-mediametadata-album" id="ref-for-dom-mediametadata-album"><c- g>album</c-></a>;
  <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage"><c- n>MediaImage</c-></a>> <a class="idl-code" data-link-type="attribute" data-type="FrozenArray<MediaImage>" href="#dom-mediametadata-artwork" id="ref-for-dom-mediametadata-artwork②"><c- g>artwork</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediametadatainit"><code><c- g>MediaMetadataInit</c-></code></dfn> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;&quot;" data-dfn-for="MediaMetadataInit" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-mediametadatainit-title"><code><c- g>title</c-></code></dfn> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;&quot;" data-dfn-for="MediaMetadataInit" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-mediametadatainit-artist"><code><c- g>artist</c-></code></dfn> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-default="&quot;&quot;" data-dfn-for="MediaMetadataInit" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-mediametadatainit-album"><code><c- g>album</c-></code></dfn> = "";
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage①"><c- n>MediaImage</c-></a>> <dfn class="dfn-paneled idl-code" data-default="[]" data-dfn-for="MediaMetadataInit" data-dfn-type="dict-member" data-export data-type="sequence<MediaImage> " id="dom-mediametadatainit-artwork"><code><c- g>artwork</c-></code></dfn> = [];
};
</pre>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata⑨">MediaMetadata</a></code> object is a representation of the metadata associated with
  a <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession②⓪">MediaSession</a></code> that can be used by user agents to provide customized user
  interface. </p>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①⓪">MediaMetadata</a></code> can have an associated <dfn class="dfn-paneled" data-dfn-for="MediaMetadata" data-dfn-type="dfn" data-lt="media session" data-noexport id="mediametadata-media-session">media
  session</dfn>. </p>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①①">MediaMetadata</a></code> has an associated <dfn class="dfn-paneled" data-dfn-for="MediaMetadata" data-dfn-type="dfn" data-noexport id="mediametadata-title">title</dfn>, <dfn class="dfn-paneled" data-dfn-for="MediaMetadata" data-dfn-type="dfn" data-noexport id="mediametadata-artist">artist</dfn> and <dfn class="dfn-paneled" data-dfn-for="MediaMetadata" data-dfn-type="dfn" data-noexport id="mediametadata-album">album</dfn> which are DOMString. </p>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①②">MediaMetadata</a></code> has an associated list of <dfn class="dfn-paneled" data-dfn-for="MediaMetadata" data-dfn-type="dfn" data-lt="artwork images" data-noexport id="mediametadata-artwork-images">artwork
  images</dfn>. </p>
   <p> A <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①③">MediaMetadata</a></code> is said to be an <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="empty-metadata">empty metadata</dfn> if it is equal
  to <code>null</code> or all the following conditions are true: </p>
   <ul>
    <li>Its <a data-link-type="dfn" href="#mediametadata-title" id="ref-for-mediametadata-title">title</a> is the empty string.
    <li>Its <a data-link-type="dfn" href="#mediametadata-artist" id="ref-for-mediametadata-artist">artist</a> is the empty string.
    <li>Its <a data-link-type="dfn" href="#mediametadata-album" id="ref-for-mediametadata-album">album</a> is the empty string.
    <li>Its <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images①" title="artwork image">artwork images</a> length
    is <code>0</code>.
   </ul>
   <p></p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaMetadata" data-dfn-type="constructor" data-export data-lt="MediaMetadata(init)|constructor(init)|MediaMetadata()|constructor()" id="dom-mediametadata-mediametadata"><code>MediaMetadata(<var>init</var>)</code></dfn> constructor, when invoked, MUST run the following steps: </p>
   <ol>
    <li> Let <var>metadata</var> be a new <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①④">MediaMetadata</a></code> object. 
    <li> Set <var>metadata</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadata-title" id="ref-for-dom-mediametadata-title①">title</a></code> to <var>init</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadatainit-title" id="ref-for-dom-mediametadatainit-title">title</a></code>. 
    <li> Set <var>metadata</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadata-artist" id="ref-for-dom-mediametadata-artist①">artist</a></code> to <var>init</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadatainit-artist" id="ref-for-dom-mediametadatainit-artist">artist</a></code>. 
    <li> Set <var>metadata</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadata-album" id="ref-for-dom-mediametadata-album①">album</a></code> to <var>init</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadatainit-album" id="ref-for-dom-mediametadatainit-album">album</a></code>. 
    <li> Run the <a data-link-type="dfn" href="#convert-artwork-algorithm" id="ref-for-convert-artwork-algorithm">convert artwork algorithm</a> with <var>init</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadatainit-artwork" id="ref-for-dom-mediametadatainit-artwork">artwork</a></code> as <var>input</var> and set <var>metadata</var>’s <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images②">artwork images</a> as the
      result if it succeeded. 
    <li> Return <var>metadata</var>. 
   </ol>
   <p></p>
   <p>When the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="convert-artwork-algorithm">convert artwork algorithm</dfn> with <var>input</var> parameter is
invoked, the user agent MUST run the following steps:</p>
   <ol>
    <li> Let <var>output</var> be an empty list of type <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage②">MediaImage</a></code>. 
    <li>
      For each <var>entry</var> in <var>input</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediametadatainit-artwork" id="ref-for-dom-mediametadatainit-artwork①">artwork</a></code>, perform the following steps: 
     <ol>
      <li> Let <var>image</var> be a new <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage③">MediaImage</a></code>. 
      <li>Let <var>baseURL</var> be the API base URL specified by the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object">entry
      settings object</a>. 
      <li> <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser">Parse</a> <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src①">src</a></code> using <var>baseURL</var>. If it does not return failure, set <var>image</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src②">src</a></code> to the return value. Otherwise,
        throw a <a class="idl-code" data-link-type="exception" href="https://heycam.github.io/webidl/#typeerror" id="ref-for-typeerror④">TypeError</a> and abort these steps. 
      <li> Set <var>image</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes">sizes</a></code> to <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes①">sizes</a></code>. 
      <li> Set <var>image</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-type" id="ref-for-dom-mediaimage-type">type</a></code> to <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-type" id="ref-for-dom-mediaimage-type①">type</a></code>. 
      <li> Append <var>image</var> to the <var>output</var>. 
     </ol>
    <li> Return <var>output</var> as result. 
   </ol>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaMetadata" data-dfn-type="attribute" data-export id="dom-mediametadata-title"><code>title</code></dfn> attribute
  reflects the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①⑤">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-title" id="ref-for-mediametadata-title①">title</a>. On getting,
  it MUST return the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①⑥">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-title" id="ref-for-mediametadata-title②">title</a>. On
  setting, it MUST set the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①⑦">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-title" id="ref-for-mediametadata-title③">title</a> to
  the given value. </p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaMetadata" data-dfn-type="attribute" data-export id="dom-mediametadata-artist"><code>artist</code></dfn> attribute
  reflects the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①⑧">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-artist" id="ref-for-mediametadata-artist①">artist</a>. On getting,
  it MUST return the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata①⑨">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-artist" id="ref-for-mediametadata-artist②">artist</a>. On
  setting, it MUST set the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②⓪">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-artist" id="ref-for-mediametadata-artist③">artist</a> to the given value. </p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaMetadata" data-dfn-type="attribute" data-export id="dom-mediametadata-album"><code>album</code></dfn> attribute
  reflects the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②①">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-album" id="ref-for-mediametadata-album①">album</a>. On getting,
  it MUST return the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②②">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-album" id="ref-for-mediametadata-album②">album</a>. On
  setting, it MUST set the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②③">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-album" id="ref-for-mediametadata-album③">album</a> to
  the given value. </p>
   <p> The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaMetadata" data-dfn-type="attribute" data-export id="dom-mediametadata-artwork"><code>artwork</code></dfn> attribute reflects the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②④">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images③">artwork
  images</a>. On getting, it MUST return the result of the following steps: </p>
   <ol>
    <li> Let <var>frozenArtwork</var> be an empty list of type <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage④">MediaImage</a></code>. 
    <li>
      For each <var>entry</var> in the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②⑤">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images④">artwork images</a>, perform the following steps: 
     <ol>
      <li> Let <var>image</var> be a new <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage⑤">MediaImage</a></code>. 
      <li> Set <var>image</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src③">src</a></code> to <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src④">src</a></code>. 
      <li> Set <var>image</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes②">sizes</a></code> to <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes③">sizes</a></code>. 
      <li> Set <var>image</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-type" id="ref-for-dom-mediaimage-type②">type</a></code> to <var>entry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-type" id="ref-for-dom-mediaimage-type③">type</a></code>. 
      <li> Call <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-object.freeze" id="ref-for-sec-object.freeze">Object.freeze</a> on <var>image</var>, to prevent
          accidental mutation by scripts. 
      <li> Append <var>image</var> to <var>frozenArtwork</var>. 
     </ol>
    <li> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-frozen-array" id="ref-for-dfn-create-frozen-array">Create a frozen array</a> from <var>frozenArtwork</var>. 
   </ol>
    On setting, it MUST run the <a data-link-type="dfn" href="#convert-artwork-algorithm" id="ref-for-convert-artwork-algorithm①">convert artwork algorithm</a> with the new value as <var>input</var>, and
  set the <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②⑥">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images⑤">artwork images</a> as the
  result if it succeeded. 
   <p></p>
   <p> When <code class="idl"><a data-link-type="idl" href="#mediametadata" id="ref-for-mediametadata②⑦">MediaMetadata</a></code>'s <a data-link-type="dfn" href="#mediametadata-title" id="ref-for-mediametadata-title④">title</a>, <a data-link-type="dfn" href="#mediametadata-artist" id="ref-for-mediametadata-artist④">artist</a>, <a data-link-type="dfn" href="#mediametadata-album" id="ref-for-mediametadata-album④">album</a> or <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images⑥">artwork images</a> are modified, the user agent MUST run the
  following steps: </p>
   <ol>
    <li> If the instance has no associated <a data-link-type="dfn" href="#mediametadata-media-session" id="ref-for-mediametadata-media-session③">media session</a>,
      abort these steps. 
    <li>
      Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">queue a task</a> to run the following substeps: 
     <ol>
      <li> If the instance no longer has an associated <a data-link-type="dfn" href="#mediametadata-media-session" id="ref-for-mediametadata-media-session④">media
          session</a>, abort these steps. 
      <li> Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel②">in parallel</a>, run the <a data-link-type="dfn" href="#update-metadata-algorithm" id="ref-for-update-metadata-algorithm②">update metadata
          algorithm</a>. 
     </ol>
   </ol>
   <p></p>
   <h2 class="heading settled" data-level="8" id="the-mediaimage-dictionary"><span class="secno">8. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage⑥">MediaImage</a></code> dictionary</span><a class="self-link" href="#the-mediaimage-dictionary"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediaimage"><code><c- g>MediaImage</c-></code></dfn> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="USVString " href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src⑤"><c- g>src</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes④"><c- g>sizes</c-></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-mediaimage-type" id="ref-for-dom-mediaimage-type④"><c- g>type</c-></a> = "";
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage⑦">MediaImage</a></code> dictionary members are inspired by the <a data-link-type="dfn" href="https://www.w3.org/TR/appmanifest/#dfn-image-object" id="ref-for-dfn-image-object">image objects</a> in Web App Manifest.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaImage" data-dfn-type="dict-member" data-export id="dom-mediaimage-src"><code>src</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member">dictionary member</a> is used
to specify the <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage⑧">MediaImage</a></code> object’s <dfn data-dfn-for="MediaImage" data-dfn-type="dfn" data-noexport id="mediaimage-source">source<a class="self-link" href="#mediaimage-source"></a></dfn>. It is
a URL from which the user agent can fetch the image’s data.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaImage" data-dfn-type="dict-member" data-export id="dom-mediaimage-sizes"><code>sizes</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member①">dictionary member</a> is
used to specify the <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage⑨">MediaImage</a></code> object’s <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes⑤">sizes</a></code>. It follows the
spec of <a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes" id="ref-for-attr-link-sizes"><code>sizes</code></a> attribute in
the HTML <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/semantics.html#the-link-element" id="ref-for-the-link-element"><code>link</code></a> element, which is a string
consisting of an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#unordered-set-of-unique-space-separated-tokens" id="ref-for-unordered-set-of-unique-space-separated-tokens">unordered set of unique space-separated tokens</a> which are <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive">ASCII case-insensitive</a> that represents the dimensions of an image. Each
keyword is either an <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#ascii-case-insensitive" id="ref-for-ascii-case-insensitive①">ASCII case-insensitive</a> match for the string "any",
or a value that consists of two valid non-negative integers that do not have a
leading U+0030 DIGIT ZERO (0) character and that are separated by a single
U+0078 LATIN SMALL LETTER X or U+0058 LATIN CAPITAL LETTER X character. The
keywords represent icon sizes in raw pixels (as opposed to CSS pixels). When
multiple image objects are available, a user agent MAY use the value to decide
which icon is most suitable for a display context (and ignore any that are
inappropriate). The parsing steps for the <code class="idl"><a data-link-type="idl" href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes⑥">sizes</a></code> attribute MUST
follow <a class="idl-code" data-link-type="attribute" href="https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes" id="ref-for-attr-link-sizes①">the parsing steps for HTML <code>link</code> element <code>sizes</code> attribute</a>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaImage" data-dfn-type="dict-member" data-export id="dom-mediaimage-type"><code>type</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member②">dictionary member</a> is
used to specify the <code class="idl"><a data-link-type="idl" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage①⓪">MediaImage</a></code> object’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#mime-type" id="ref-for-mime-type">MIME type</a>. It is a hint as to
the media type of the image. The purpose of this attribute is to allow a user
agent to ignore images of media types it does not support.</p>
   <h2 class="heading settled" data-level="9" id="the-mediapositionstate-dictionary"><span class="secno">9. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#dictdef-mediapositionstate" id="ref-for-dictdef-mediapositionstate②">MediaPositionState</a></code> dictionary</span><a class="self-link" href="#the-mediapositionstate-dictionary"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediapositionstate"><code><c- g>MediaPositionState</c-></code></dfn> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediapositionstate-duration" id="ref-for-dom-mediapositionstate-duration③"><c- g>duration</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediapositionstate-playbackrate" id="ref-for-dom-mediapositionstate-playbackrate②"><c- g>playbackRate</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediapositionstate-position" id="ref-for-dom-mediapositionstate-position②"><c- g>position</c-></a>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dictdef-mediapositionstate" id="ref-for-dictdef-mediapositionstate③">MediaPositionState</a></code> dictionary is a representation of the current
playback position associated with a <code class="idl"><a data-link-type="idl" href="#mediasession" id="ref-for-mediasession②①">MediaSession</a></code> that can be used by user
agents to provide a user interface that displays the current playback position
and duration.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaPositionState" data-dfn-type="dict-member" data-export id="dom-mediapositionstate-duration"><code>duration</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member③">dictionary
member</a> is used to specify the <a data-link-type="dfn" href="#duration" id="ref-for-duration③">duration</a> in seconds. It should always be positive
and positive infinity can be used to indicate media without a defined end such
as live playback.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaPositionState" data-dfn-type="dict-member" data-export id="dom-mediapositionstate-playbackrate"><code>playbackRate</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member④">dictionary
member</a> is used to specify the <a data-link-type="dfn" href="#playback-rate" id="ref-for-playback-rate①">playback rate</a>. It can be positive to represent
forward playback or negative to represent backwards playback. It should not be
zero.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaPositionState" data-dfn-type="dict-member" data-export id="dom-mediapositionstate-position"><code>position</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member⑤">dictionary
member</a> is used to specify the <a data-link-type="dfn" href="#last-reported-playback-position" id="ref-for-last-reported-playback-position①">last reported playback position</a> in seconds. It
should always be positive.</p>
   <h2 class="heading settled" data-level="10" id="the-mediasessionactiondetails-dictionary"><span class="secno">10. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails②">MediaSessionActionDetails</a></code> dictionary</span><a class="self-link" href="#the-mediasessionactiondetails-dictionary"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediasessionactiondetails"><code><c- g>MediaSessionActionDetails</c-></code></dfn> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#enumdef-mediasessionaction" id="ref-for-enumdef-mediasessionaction②"><c- n>MediaSessionAction</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="MediaSessionAction " href="#dom-mediasessionactiondetails-action" id="ref-for-dom-mediasessionactiondetails-action"><c- g>action</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediasessionseekactiondetails"><code><c- g>MediaSessionSeekActionDetails</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails③"><c- n>MediaSessionActionDetails</c-></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③"><c- b>double</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="double? " href="#dom-mediasessionseekactiondetails-seekoffset" id="ref-for-dom-mediasessionseekactiondetails-seekoffset"><c- g>seekOffset</c-></a>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-mediasessionseektoactiondetails"><code><c- g>MediaSessionSeekToActionDetails</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails④"><c- n>MediaSessionActionDetails</c-></a> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediasessionseektoactiondetails-seektime" id="ref-for-dom-mediasessionseektoactiondetails-seektime"><c- g>seekTime</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="boolean? " href="#dom-mediasessionseektoactiondetails-fastseek" id="ref-for-dom-mediasessionseektoactiondetails-fastseek"><c- g>fastSeek</c-></a>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler④">MediaSessionActionHandler</a></code> MUST be run with the <var>details</var> parameter which is represented by a dictionary inherited from <code class="idl"><a data-link-type="idl" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails⑤">MediaSessionActionDetails</a></code>.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionActionDetails" data-dfn-type="dict-member" data-export id="dom-mediasessionactiondetails-action"><code>action</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member⑥">dictionary
member</a> is used to specify the <a data-link-type="dfn">action</a> that the <code class="idl"><a data-link-type="idl" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler⑤">MediaSessionActionHandler</a></code> is
associated with.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionSeekActionDetails" data-dfn-type="dict-member" data-export id="dom-mediasessionseekactiondetails-seekoffset"><code>seekOffset</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member⑦">dictionary member</a> MAY be provided and is the time in seconds to move the
playback time by. If it is not provided then the site should choose a sensible
time (e.g. a few seconds).</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionSeekToActionDetails" data-dfn-type="dict-member" data-export id="dom-mediasessionseektoactiondetails-seektime"><code>seekTime</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member⑧">dictionary member</a> MUST be provided and is the time in seconds to move the
playback time to.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="MediaSessionSeekToActionDetails" data-dfn-type="dict-member" data-export id="dom-mediasessionseektoactiondetails-fastseek"><code>fastSeek</code></dfn> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-dictionary-member" id="ref-for-dfn-dictionary-member⑨">dictionary member</a> MAY be provided and will be true if the <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekto" id="ref-for-dom-mediasessionaction-seekto②">seekto</a> <a data-link-type="dfn">action</a> is being called
multiple times as part of a sequence and this is not the last call in that
sequence.</p>
   <h2 class="heading settled" data-level="11" id="examples"><span class="secno">11. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <div class="example" id="example-setting-metadata">
    <a class="self-link" href="#example-setting-metadata"></a> Setting <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata⑤">metadata</a>: 
<pre class="lang-javascript highlight">navigator<c- p>.</c->mediaSession<c- p>.</c->metadata <c- o>=</c-> <c- k>new</c-> MediaMetadata<c- p>({</c->
  title<c- o>:</c-> <c- u>"Episode Title"</c-><c- p>,</c->
  artist<c- o>:</c-> <c- u>"Podcast Host"</c-><c- p>,</c->
  album<c- o>:</c-> <c- u>"Podcast Title"</c-><c- p>,</c->
  artwork<c- o>:</c-> <c- p>[{</c->src<c- o>:</c-> <c- u>"podcast.jpg"</c-><c- p>}]</c->
<c- p>});</c->
</pre>
    <p>Alternatively, providing multiple <a data-link-type="dfn" href="#mediametadata-artwork-images" id="ref-for-mediametadata-artwork-images⑦" title="artwork
  image">artwork images</a> in the metadata can let the user agent be able to
  select different artwork images for different display purposes and better fit
  for different screens:</p>
<pre class="lang-javascript highlight">navigator<c- p>.</c->mediaSession<c- p>.</c->metadata <c- o>=</c-> <c- k>new</c-> MediaMetadata<c- p>({</c->
  title<c- o>:</c-> <c- u>"Episode Title"</c-><c- p>,</c->
  artist<c- o>:</c-> <c- u>"Podcast Host"</c-><c- p>,</c->
  album<c- o>:</c-> <c- u>"Podcast Title"</c-><c- p>,</c->
  artwork<c- o>:</c-> <c- p>[</c->
    <c- p>{</c->src<c- o>:</c-> <c- u>"podcast.jpg"</c-><c- p>,</c-> sizes<c- o>:</c-> <c- u>"128x128"</c-><c- p>,</c-> type<c- o>:</c-> <c- u>"image/jpeg"</c-><c- p>},</c->
    <c- p>{</c->src<c- o>:</c-> <c- u>"podcast_hd.jpg"</c-><c- p>,</c-> sizes<c- o>:</c-> <c- u>"256x256"</c-><c- p>},</c->
    <c- p>{</c->src<c- o>:</c-> <c- u>"podcast_xhd.jpg"</c-><c- p>,</c-> sizes<c- o>:</c-> <c- u>"1024x1024"</c-><c- p>,</c-> type<c- o>:</c-> <c- u>"image/jpeg"</c-><c- p>},</c->
    <c- p>{</c->src<c- o>:</c-> <c- u>"podcast.png"</c-><c- p>,</c-> sizes<c- o>:</c-> <c- u>"128x128"</c-><c- p>,</c-> type<c- o>:</c-> <c- u>"image/png"</c-><c- p>},</c->
    <c- p>{</c->src<c- o>:</c-> <c- u>"podcast_hd.png"</c-><c- p>,</c-> sizes<c- o>:</c-> <c- u>"256x256"</c-><c- p>,</c-> type<c- o>:</c-> <c- u>"image/png"</c-><c- p>},</c->
    <c- p>{</c->src<c- o>:</c-> <c- u>"podcast.ico"</c-><c- p>,</c-> sizes<c- o>:</c-> <c- u>"128x128 256x256"</c-><c- p>,</c-> type<c- o>:</c-> <c- u>"image/x-icon"</c-><c- p>}</c->
  <c- p>]</c->
<c- p>});</c->
</pre>
    <p>For example, if the user agent wants to use an image as icon, it may choose <code>"podcast.jpg"</code> or <code>"podcast.png"</code> for a
  low-pixel-density screen, and <code>"podcast_hd.jpg"</code> or <code>"podcast_hd.png"</code> for a high-pixel-density screen. If the user
  agent wants to use an image for lockscreen background, <code>"podcast_xhd.jpg"</code> will be preferred.</p>
   </div>
   <div class="example" id="example-changing-metadata">
    <a class="self-link" href="#example-changing-metadata"></a> Changing <a data-link-type="dfn" href="#mediasession-metadata" id="ref-for-mediasession-metadata⑥">metadata</a>: 
    <p>For playlists or chapters of an audio book, multiple <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element" id="ref-for-media-element">media elements</a> can
  share a single <a data-link-type="dfn" href="#mediametadata-media-session" id="ref-for-mediametadata-media-session⑤">media session</a>.</p>
<pre class="lang-javascript highlight"><c- a>var</c-> audio1 <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"audio"</c-><c- p>);</c->
audio1<c- p>.</c->src <c- o>=</c-> <c- u>"chapter1.mp3"</c-><c- p>;</c->

<c- a>var</c-> audio2 <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"audio"</c-><c- p>);</c->
audio2<c- p>.</c->src <c- o>=</c-> <c- u>"chapter2.mp3"</c-><c- p>;</c->

audio1<c- p>.</c->play<c- p>();</c->
audio1<c- p>.</c->addEventListener<c- p>(</c-><c- u>"ended"</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
  audio2<c- p>.</c->play<c- p>();</c->
<c- p>});</c->
</pre>
    <p>Because the session is shared, the metadata must be updated to reflect what is
  currently playing.</p>
<pre class="lang-javascript highlight"><c- a>function</c-> updateMetadata<c- p>(</c->event<c- p>)</c-> <c- p>{</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->metadata <c- o>=</c-> <c- k>new</c-> MediaMetadata<c- p>({</c->
    title<c- o>:</c-> event<c- p>.</c->target <c- o>==</c-> audio1 <c- o>?</c-> <c- u>"Chapter 1"</c-> <c- o>:</c-> <c- u>"Chapter 2"</c-><c- p>,</c->
    artist<c- o>:</c-> <c- u>"An Author"</c-><c- p>,</c->
    album<c- o>:</c-> <c- u>"A Book"</c-><c- p>,</c->
    artwork<c- o>:</c-> <c- p>[{</c->src<c- o>:</c-> <c- u>"cover.jpg"</c-><c- p>}]</c->
  <c- p>});</c->
<c- p>}</c->

audio1<c- p>.</c->addEventListener<c- p>(</c-><c- u>"play"</c-><c- p>,</c-> updateMetadata<c- p>);</c->
audio2<c- p>.</c->addEventListener<c- p>(</c-><c- u>"play"</c-><c- p>,</c-> updateMetadata<c- p>);</c->
</pre>
   </div>
   <div class="example" id="example-media-session-actions">
    <a class="self-link" href="#example-media-session-actions"></a> Handling <a data-link-type="dfn" href="#media-session-action" id="ref-for-media-session-action⑨">media session actions</a>: 
<pre class="lang-javascript highlight"><c- a>var</c-> tracks <c- o>=</c-> <c- p>[</c-><c- u>"chapter1.mp3"</c-><c- p>,</c-> <c- u>"chapter2.mp3"</c-><c- p>,</c-> <c- u>"chapter3.mp3"</c-><c- p>];</c->
<c- a>var</c-> trackId <c- o>=</c-> <c- mi>0</c-><c- p>;</c->

<c- a>var</c-> audio <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"audio"</c-><c- p>);</c->
audio<c- p>.</c->src <c- o>=</c-> tracks<c- p>[</c->trackId<c- p>];</c->

<c- a>function</c-> updatePlayingMedia<c- p>()</c-> <c- p>{</c->
  audio<c- p>.</c->src <c- o>=</c-> tracks<c- p>[</c->trackId<c- p>];</c->
  <c- c1>// Update metadata (omitted)</c->
<c- p>}</c->

navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"previoustrack"</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
  trackId <c- o>=</c-> <c- p>(</c->trackId <c- o>+</c-> tracks<c- p>.</c->length <c- o>-</c-> <c- mi>1</c-><c- p>)</c-> <c- o>%</c-> tracks<c- p>.</c->length<c- p>;</c->
  updatePlayingMedia<c- p>();</c->
<c- p>});</c->

navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"nexttrack"</c-><c- p>,</c-> <c- a>function</c-><c- p>()</c-> <c- p>{</c->
  trackId <c- o>=</c-> <c- p>(</c->trackId <c- o>+</c-> <c- mi>1</c-><c- p>)</c-> <c- o>%</c-> tracks<c- p>.</c->length<c- p>;</c->
  updatePlayingMedia<c- p>();</c->
<c- p>});</c->

navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"seekto"</c-><c- p>,</c-> <c- a>function</c-><c- p>(</c->details<c- p>)</c-> <c- p>{</c->
  audio<c- p>.</c->currentTime <c- o>=</c-> details<c- p>.</c->seekTime<c- p>;</c->
<c- p>});</c->
</pre>
   </div>
   <div class="example" id="example-set-playbackState">
    <a class="self-link" href="#example-set-playbackState"></a> Setting <code class="idl"><a data-link-type="idl" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate⑦">playbackState</a></code>: 
    <p>When a page pauses its media and plays a third-party ad in an iframe, the UA
  might consider the session as "not playing", however the page wants to allow
  the user to pause the ad playback and cancel the pending playback after the ad
  finishes.</p>
<pre class="lang-javascript highlight"><c- a>var</c-> adFrame<c- p>;</c->
<c- a>var</c-> audio <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"audio"</c-><c- p>);</c->
audio<c- p>.</c->src <c- o>=</c-> <c- u>"foo.mp3"</c-><c- p>;</c->

<c- a>function</c-> resetActionHandlers<c- p>()</c-> <c- p>{</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"play"</c-><c- p>,</c-> _ <c- p>=></c-> audio<c- p>.</c->play<c- p>());</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"pause"</c-><c- p>,</c-> _ <c- p>=></c-> audio<c- p>.</c->pause<c- p>());</c->
<c- p>}</c->

resetActionHandlers<c- p>();</c->

<c- c1>// This method will be called when the page wants to play some ad.</c->
<c- a>function</c-> pauseAudioAndPlayAd<c- p>()</c-> <c- p>{</c->
  audio<c- p>.</c->pause<c- p>();</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->playbackState <c- o>=</c-> <c- u>"playing"</c-><c- p>;</c->
  setUpAdFrame<c- p>();</c->
  adFrame<c- p>.</c->contentWindow<c- p>.</c->postMessage<c- p>(</c-><c- u>"play_ad"</c-><c- p>);</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"pause"</c-><c- p>,</c-> pauseAd<c- p>);</c->
<c- p>}</c->

<c- a>function</c-> pauseAd<c- p>()</c-> <c- p>{</c->
  adFrame<c- p>.</c->contentWindow<c- p>.</c->postMessage<c- p>(</c-><c- u>"pause_ad"</c-><c- p>);</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->playbackState <c- o>=</c-> <c- u>"paused"</c-><c- p>;</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"play"</c-><c- p>,</c-> resumeAd<c- p>);</c->
<c- p>}</c->

<c- a>function</c-> resumeAd<c- p>()</c-> <c- p>{</c->
  adFrame<c- p>.</c->contentWindow<c- p>.</c->postMessage<c- p>(</c-><c- u>"resume_ad"</c-><c- p>);</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->playbackState <c- o>=</c-> <c- u>"playing"</c-><c- p>;</c->
  navigator<c- p>.</c->mediaSession<c- p>.</c->setActionHandler<c- p>(</c-><c- u>"pause"</c-><c- p>,</c-> pauseAd<c- p>);</c->
<c- p>}</c->

window<c- p>.</c->onmessage <c- o>=</c-> <c- a>function</c-><c- p>(</c->e<c- p>)</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->e<c- p>.</c->data <c- o>===</c-> <c- u>"ad finished"</c-><c- p>)</c-> <c- p>{</c->
    removeAdFrame<c- p>();</c->
    navigator<c- p>.</c->mediaSession<c- p>.</c->playbackState <c- o>=</c-> <c- u>"none"</c-><c- p>;</c->
    resetActionHandlers<c- p>();</c->
  <c- p>}</c->
<c- p>}</c->

<c- a>function</c-> setUpAdFrame<c- p>()</c-> <c- p>{</c->
  adFrame <c- o>=</c-> document<c- p>.</c->createElement<c- p>(</c-><c- u>"iframe"</c-><c- p>);</c->
  adFrame<c- p>.</c->src <c- o>=</c-> <c- u>"https://example.com/ad-iframe.html"</c-><c- p>;</c->
  document<c- p>.</c->body<c- p>.</c->appendChild<c- p>(</c->adFrame<c- p>);</c->
<c- p>}</c->

<c- a>function</c-> removeAdFrame<c- p>()</c-> <c- p>{</c->
  adFrame<c- p>.</c->remove<c- p>();</c->
<c- p>}</c->
</pre>
   </div>
   <div class="example" id="example-media-position-state">
    <a class="self-link" href="#example-media-position-state"></a> Setting <a data-link-type="dfn" href="#position-state①" id="ref-for-position-state①⑥">position state</a>: 
<pre class="lang-javascript highlight"><c- c1>// Media is loaded, set the duration.</c->
navigator<c- p>.</c->mediaSession<c- p>.</c->setPositionState<c- p>({</c->
  duration<c- o>:</c-> <c- mi>60</c->
<c- p>});</c->

<c- c1>// Media starts playing at the beginning.</c->
navigator<c- p>.</c->mediaSession<c- p>.</c->playbackState <c- o>=</c-> <c- u>"playing"</c-><c- p>;</c->

<c- c1>// Media starts playing at 2x 10 seconds in.</c->
navigator<c- p>.</c->mediaSession<c- p>.</c->setPositionState<c- p>({</c->
  duration<c- o>:</c-> <c- mi>60</c-><c- p>,</c->
  playbackRate<c- o>:</c-> <c- mi>2</c-><c- p>,</c->
  position<c- o>:</c-> <c- mi>10</c->
<c- p>});</c->

<c- c1>// Media is paused.</c->
navigator<c- p>.</c->mediaSession<c- p>.</c->playbackState <c- o>=</c-> <c- u>"paused"</c-><c- p>;</c->

<c- c1>// Media is reset.</c->
navigator<c- p>.</c->mediaSession<c- p>.</c->setPositionState<c- p>(</c-><c- kc>null</c-><c- p>);</c->
</pre>
   </div>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>The editors would like to thank Paul Adenot, Jake Archibald, Tab Atkins,
Jonathan Bailey, François Beaufort, Marcos Caceres, Domenic Denicola, Ralph
Giles, Anne van Kesteren, Tobie Langel, Michael Mahemoff, Jer Noble, Elliott
Sprehn, Chris Wilson, and Jörn Zaefferer for their participation in technical
discussions that ultimately made this specification possible.</p>
   <p>Special thanks go to Philip Jägenstedt and David Vest for their help in
designing every aspect of media sessions and for their seemingly infinite
patience in working through the initial design issues; Jer Noble for his help in
building a model that also works well within the iOS audio focus model; and
Mounir Lamouri and Anton Vayvod for their early involvement, feedback and
support in making this specification happen.</p>
<script id="head" src="https://resources.whatwg.org/dfn.js"></script>
   <p id="back-to-top" role="navigation"><a href="#toc"><abbr title="Back to Top">↑</abbr></a></p>
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </main>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-mediasessionactiondetails-action">action</a><span>, in §10</span>
   <li><a href="#active-media-session">active media session</a><span>, in §5.2</span>
   <li><a href="#actual-playback-rate">actual playback rate</a><span>, in §5.5</span>
   <li><a href="#actual-playback-state">actual playback state</a><span>, in §5.1</span>
   <li>
    album
    <ul>
     <li><a href="#dom-mediametadata-album">attribute for MediaMetadata</a><span>, in §7</span>
     <li><a href="#mediametadata-album">dfn for MediaMetadata</a><span>, in §7</span>
     <li><a href="#dom-mediametadatainit-album">dict-member for MediaMetadataInit</a><span>, in §7</span>
    </ul>
   <li>
    artist
    <ul>
     <li><a href="#dom-mediametadata-artist">attribute for MediaMetadata</a><span>, in §7</span>
     <li><a href="#mediametadata-artist">dfn for MediaMetadata</a><span>, in §7</span>
     <li><a href="#dom-mediametadatainit-artist">dict-member for MediaMetadataInit</a><span>, in §7</span>
    </ul>
   <li>
    artwork
    <ul>
     <li><a href="#dom-mediametadata-artwork">attribute for MediaMetadata</a><span>, in §7</span>
     <li><a href="#dom-mediametadatainit-artwork">dict-member for MediaMetadataInit</a><span>, in §7</span>
    </ul>
   <li><a href="#mediametadata-artwork-images">artwork images</a><span>, in §7</span>
   <li><a href="#audio-focus">audio focus</a><span>, in §5.2</span>
   <li><a href="#dom-mediametadata-mediametadata">constructor()</a><span>, in §7</span>
   <li><a href="#dom-mediametadata-mediametadata">constructor(init)</a><span>, in §7</span>
   <li><a href="#convert-artwork-algorithm">convert artwork algorithm</a><span>, in §7</span>
   <li><a href="#current-playback-position">current playback position</a><span>, in §5.5</span>
   <li><a href="#declared-playback-state">declared playback state</a><span>, in §6</span>
   <li>
    duration
    <ul>
     <li><a href="#duration">definition of</a><span>, in §5.5</span>
     <li><a href="#dom-mediapositionstate-duration">dict-member for MediaPositionState</a><span>, in §9</span>
    </ul>
   <li><a href="#empty-metadata">empty metadata</a><span>, in §7</span>
   <li><a href="#dom-mediasessionseektoactiondetails-fastseek">fastSeek</a><span>, in §10</span>
   <li><a href="#fetch-image-algorithm">fetch image algorithm</a><span>, in §5.3</span>
   <li><a href="#guessed-playback-state">guessed playback state</a><span>, in §5.1</span>
   <li><a href="#handle-media-session-action">handle media session action</a><span>, in §5.4</span>
   <li><a href="#last-position-updated-time">last position updated time</a><span>, in §5.5</span>
   <li><a href="#last-reported-playback-position">last reported playback position</a><span>, in §5.5</span>
   <li><a href="#dictdef-mediaimage">MediaImage</a><span>, in §8</span>
   <li><a href="#dom-mediametadata-mediametadata">MediaMetadata()</a><span>, in §7</span>
   <li><a href="#mediametadata">MediaMetadata</a><span>, in §7</span>
   <li><a href="#dictdef-mediametadatainit">MediaMetadataInit</a><span>, in §7</span>
   <li><a href="#dom-mediametadata-mediametadata">MediaMetadata(init)</a><span>, in §7</span>
   <li><a href="#dictdef-mediapositionstate">MediaPositionState</a><span>, in §9</span>
   <li><a href="#mediasession">MediaSession</a><span>, in §6</span>
   <li><a href="#mediametadata-media-session">media session</a><span>, in §7</span>
   <li><a href="#dom-navigator-mediasession">mediaSession</a><span>, in §6</span>
   <li><a href="#enumdef-mediasessionaction">MediaSessionAction</a><span>, in §6</span>
   <li><a href="#media-session-action">media session action</a><span>, in §5.4</span>
   <li><a href="#dictdef-mediasessionactiondetails">MediaSessionActionDetails</a><span>, in §10</span>
   <li><a href="#callbackdef-mediasessionactionhandler">MediaSessionActionHandler</a><span>, in §6</span>
   <li><a href="#media-session-action-source">media session action source</a><span>, in §5.4</span>
   <li><a href="#media-session-actions-update-algorithm">media session actions update algorithm</a><span>, in §5.4</span>
   <li><a href="#enumdef-mediasessionplaybackstate">MediaSessionPlaybackState</a><span>, in §6</span>
   <li><a href="#dictdef-mediasessionseekactiondetails">MediaSessionSeekActionDetails</a><span>, in §10</span>
   <li><a href="#dictdef-mediasessionseektoactiondetails">MediaSessionSeekToActionDetails</a><span>, in §10</span>
   <li>
    metadata
    <ul>
     <li><a href="#dom-mediasession-metadata">attribute for MediaSession</a><span>, in §6</span>
     <li><a href="#mediasession-metadata">dfn for MediaSession</a><span>, in §6</span>
    </ul>
   <li><a href="#dom-mediasessionaction-nexttrack">nexttrack</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-nexttrack">"nexttrack"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionplaybackstate-none">"none"</a><span>, in §6</span>
   <li><a href="#dom-mediasessionplaybackstate-none">none</a><span>, in §6</span>
   <li><a href="#dom-mediasessionaction-pause">"pause"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-pause">pause</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionplaybackstate-paused">paused</a><span>, in §6</span>
   <li><a href="#dom-mediasessionplaybackstate-paused">"paused"</a><span>, in §6</span>
   <li><a href="#dom-mediasessionaction-play">play</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-play">"play"</a><span>, in §5.4</span>
   <li><a href="#playback-rate">playback rate</a><span>, in §5.5</span>
   <li><a href="#dom-mediapositionstate-playbackrate">playbackRate</a><span>, in §9</span>
   <li><a href="#dom-mediasession-playbackstate">playbackState</a><span>, in §6</span>
   <li><a href="#dom-mediasessionplaybackstate-playing">playing</a><span>, in §6</span>
   <li><a href="#dom-mediasessionplaybackstate-playing">"playing"</a><span>, in §6</span>
   <li><a href="#dom-mediapositionstate-position">position</a><span>, in §9</span>
   <li><a href="#position-state①">position state</a><span>, in §5.5</span>
   <li><a href="#preferred-artwork-image">preferred artwork image</a><span>, in §5.3</span>
   <li><a href="#dom-mediasessionaction-previoustrack">previoustrack</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-previoustrack">"previoustrack"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-seekbackward">"seekbackward"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-seekbackward">seekbackward</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-seekforward">"seekforward"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-seekforward">seekforward</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionseekactiondetails-seekoffset">seekOffset</a><span>, in §10</span>
   <li><a href="#dom-mediasessionseektoactiondetails-seektime">seekTime</a><span>, in §10</span>
   <li><a href="#dom-mediasessionaction-seekto">"seekto"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-seekto">seekto</a><span>, in §5.4</span>
   <li><a href="#dom-mediasession-setactionhandler①">setActionHandler()</a><span>, in §6</span>
   <li><a href="#dom-mediasession-setactionhandler">setActionHandler(action, handler)</a><span>, in §6</span>
   <li><a href="#dom-mediasession-setpositionstate">setPositionState()</a><span>, in §6</span>
   <li><a href="#dom-mediasession-setpositionstate">setPositionState(state)</a><span>, in §6</span>
   <li><a href="#dom-mediaimage-sizes">sizes</a><span>, in §8</span>
   <li><a href="#dom-mediasessionaction-skipad">"skipad"</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-skipad">skipad</a><span>, in §5.4</span>
   <li><a href="#mediaimage-source">source</a><span>, in §8</span>
   <li><a href="#dom-mediaimage-src">src</a><span>, in §8</span>
   <li><a href="#dom-mediasessionaction-stop">stop</a><span>, in §5.4</span>
   <li><a href="#dom-mediasessionaction-stop">"stop"</a><span>, in §5.4</span>
   <li><a href="#supported-media-session-actions">supported media session actions</a><span>, in §5.4</span>
   <li>
    title
    <ul>
     <li><a href="#dom-mediametadata-title">attribute for MediaMetadata</a><span>, in §7</span>
     <li><a href="#mediametadata-title">dfn for MediaMetadata</a><span>, in §7</span>
     <li><a href="#dom-mediametadatainit-title">dict-member for MediaMetadataInit</a><span>, in §7</span>
    </ul>
   <li><a href="#dom-mediaimage-type">type</a><span>, in §8</span>
   <li><a href="#update-action-handler-algorithm">update action handler algorithm</a><span>, in §5.4</span>
   <li><a href="#update-metadata-algorithm">update metadata algorithm</a><span>, in §5.3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-dfn-image-object">
   <a href="https://www.w3.org/TR/appmanifest/#dfn-image-object">https://www.w3.org/TR/appmanifest/#dfn-image-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-image-object">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-fetch">
   <a href="https://fetch.spec.whatwg.org/#concept-fetch">https://fetch.spec.whatwg.org/#concept-fetch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-fetch">5.3. Metadata</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-internal-response">
   <a href="https://fetch.spec.whatwg.org/#concept-internal-response">https://fetch.spec.whatwg.org/#concept-internal-response</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-internal-response">5.3. Metadata</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-response">
   <a href="https://fetch.spec.whatwg.org/#concept-response">https://fetch.spec.whatwg.org/#concept-response</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-response">5.3. Metadata</a> <a href="#ref-for-concept-response①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-response-type">
   <a href="https://fetch.spec.whatwg.org/#concept-response-type">https://fetch.spec.whatwg.org/#concept-response-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-response-type">5.3. Metadata</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-navigator">
   <a href="https://html.spec.whatwg.org/multipage/system-state.html#navigator">https://html.spec.whatwg.org/multipage/system-state.html#navigator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-navigator">6. The MediaSession interface</a> <a href="#ref-for-navigator①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-ascii-case-insensitive">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#ascii-case-insensitive">https://html.spec.whatwg.org/multipage/infrastructure.html#ascii-case-insensitive</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ascii-case-insensitive">8. The MediaImage dictionary</a> <a href="#ref-for-ascii-case-insensitive①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context">5.1. Playback State</a> <a href="#ref-for-browsing-context①">(2)</a> <a href="#ref-for-browsing-context②">(3)</a> <a href="#ref-for-browsing-context③">(4)</a>
    <li><a href="#ref-for-browsing-context④">5.2. Routing</a> <a href="#ref-for-browsing-context⑤">(2)</a>
    <li><a href="#ref-for-browsing-context⑥">5.5. Position State</a>
    <li><a href="#ref-for-browsing-context⑦">6. The MediaSession interface</a> <a href="#ref-for-browsing-context⑧">(2)</a> <a href="#ref-for-browsing-context⑨">(3)</a> <a href="#ref-for-browsing-context①⓪">(4)</a> <a href="#ref-for-browsing-context①①">(5)</a> <a href="#ref-for-browsing-context①②">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-case-sensitivity-and-string-comparison">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitivity-and-string-comparison">https://html.spec.whatwg.org/multipage/infrastructure.html#case-sensitivity-and-string-comparison</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-case-sensitivity-and-string-comparison">2. Conformance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-entry-settings-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object">https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-entry-settings-object">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">5.3. Metadata</a>
    <li><a href="#ref-for-in-parallel①">6. The MediaSession interface</a>
    <li><a href="#ref-for-in-parallel②">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-link-element">
   <a href="https://html.spec.whatwg.org/multipage/semantics.html#the-link-element">https://html.spec.whatwg.org/multipage/semantics.html#the-link-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-link-element">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-media-element">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#media-element">https://html.spec.whatwg.org/multipage/embedded-content.html#media-element</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-element">11. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mime-type">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#mime-type">https://html.spec.whatwg.org/multipage/infrastructure.html#mime-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mime-type">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-media-muted">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#concept-media-muted">https://html.spec.whatwg.org/multipage/embedded-content.html#concept-media-muted</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-media-muted">5.1. Playback State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-nested-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#nested-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-nested-browsing-context">5.2. Routing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-potentially-playing">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#potentially-playing">https://html.spec.whatwg.org/multipage/embedded-content.html#potentially-playing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-potentially-playing">5.1. Playback State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">5.4. Actions</a>
    <li><a href="#ref-for-queue-a-task①">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-attr-link-sizes">
   <a href="https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes">https://html.spec.whatwg.org/multipage/semantics.html#attr-link-sizes</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-attr-link-sizes">8. The MediaImage dictionary</a> <a href="#ref-for-attr-link-sizes①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-top-level-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#top-level-browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-top-level-browsing-context">5.2. Routing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-triggered-by-user-activation">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation">https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-triggered-by-user-activation">5.4. Actions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unordered-set-of-unique-space-separated-tokens">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#unordered-set-of-unique-space-separated-tokens">https://html.spec.whatwg.org/multipage/infrastructure.html#unordered-set-of-unique-space-separated-tokens</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unordered-set-of-unique-space-separated-tokens">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-parser">
   <a href="https://url.spec.whatwg.org/#concept-url-parser">https://url.spec.whatwg.org/#concept-url-parser</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-parser">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">7. The MediaMetadata interface</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a> <a href="#ref-for-idl-DOMString③">(4)</a> <a href="#ref-for-idl-DOMString④">(5)</a> <a href="#ref-for-idl-DOMString⑤">(6)</a>
    <li><a href="#ref-for-idl-DOMString⑥">8. The MediaImage dictionary</a> <a href="#ref-for-idl-DOMString⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">6. The MediaSession interface</a> <a href="#ref-for-Exposed①">(2)</a>
    <li><a href="#ref-for-Exposed②">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-USVString">
   <a href="https://heycam.github.io/webidl/#idl-USVString">https://heycam.github.io/webidl/#idl-USVString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-USVString">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-create-frozen-array">
   <a href="https://heycam.github.io/webidl/#dfn-create-frozen-array">https://heycam.github.io/webidl/#dfn-create-frozen-array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-create-frozen-array">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-dictionary-member">
   <a href="https://heycam.github.io/webidl/#dfn-dictionary-member">https://heycam.github.io/webidl/#dfn-dictionary-member</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-dictionary-member">8. The MediaImage dictionary</a> <a href="#ref-for-dfn-dictionary-member①">(2)</a> <a href="#ref-for-dfn-dictionary-member②">(3)</a>
    <li><a href="#ref-for-dfn-dictionary-member③">9. The MediaPositionState
dictionary</a> <a href="#ref-for-dfn-dictionary-member④">(2)</a> <a href="#ref-for-dfn-dictionary-member⑤">(3)</a>
    <li><a href="#ref-for-dfn-dictionary-member⑥">10. The
MediaSessionActionDetails dictionary</a> <a href="#ref-for-dfn-dictionary-member⑦">(2)</a> <a href="#ref-for-dfn-dictionary-member⑧">(3)</a> <a href="#ref-for-dfn-dictionary-member⑨">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-double">
   <a href="https://heycam.github.io/webidl/#idl-double">https://heycam.github.io/webidl/#idl-double</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-double">9. The MediaPositionState
dictionary</a> <a href="#ref-for-idl-double①">(2)</a> <a href="#ref-for-idl-double②">(3)</a>
    <li><a href="#ref-for-idl-double③">10. The
MediaSessionActionDetails dictionary</a> <a href="#ref-for-idl-double④">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[appmanifest]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dfn-image-object" style="color:initial">image object</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-fetch" style="color:initial">fetch</span>
     <li><span class="dfn-paneled" id="term-for-concept-internal-response" style="color:initial">internal response</span>
     <li><span class="dfn-paneled" id="term-for-concept-response" style="color:initial">response</span>
     <li><span class="dfn-paneled" id="term-for-concept-response-type" style="color:initial">response type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-navigator" style="color:initial">Navigator</span>
     <li><span class="dfn-paneled" id="term-for-ascii-case-insensitive" style="color:initial">ascii case-insensitive</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context" style="color:initial">browsing context</span>
     <li><span class="dfn-paneled" id="term-for-case-sensitivity-and-string-comparison" style="color:initial">case-sensitive</span>
     <li><span class="dfn-paneled" id="term-for-entry-settings-object" style="color:initial">entry settings object</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-the-link-element" style="color:initial">link</span>
     <li><span class="dfn-paneled" id="term-for-media-element" style="color:initial">media element</span>
     <li><span class="dfn-paneled" id="term-for-mime-type" style="color:initial">mime type</span>
     <li><span class="dfn-paneled" id="term-for-concept-media-muted" style="color:initial">muted</span>
     <li><span class="dfn-paneled" id="term-for-nested-browsing-context" style="color:initial">nested browsing context</span>
     <li><span class="dfn-paneled" id="term-for-potentially-playing" style="color:initial">potentially playing</span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-attr-link-sizes" style="color:initial">sizes</span>
     <li><span class="dfn-paneled" id="term-for-top-level-browsing-context" style="color:initial">top-level browsing context</span>
     <li><span class="dfn-paneled" id="term-for-triggered-by-user-activation" style="color:initial">triggered by user activation</span>
     <li><span class="dfn-paneled" id="term-for-unordered-set-of-unique-space-separated-tokens" style="color:initial">unordered set of unique space-separated tokens</span>
    </ul>
   <li>
    <a data-link-type="biblio">[URL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-url-parser" style="color:initial">url parser</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEBIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-idl-USVString" style="color:initial">USVString</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-dfn-create-frozen-array" style="color:initial">create a frozen array</span>
     <li><span class="dfn-paneled" id="term-for-dfn-dictionary-member" style="color:initial">dictionary members</span>
     <li><span class="dfn-paneled" id="term-for-idl-double" style="color:initial">double</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-appmanifest">[APPMANIFEST]
   <dd>Marcos Caceres; et al. <a href="https://www.w3.org/TR/appmanifest/">Web App Manifest</a>. 31 May 2019. WD. URL: <a href="https://www.w3.org/TR/appmanifest/">https://www.w3.org/TR/appmanifest/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-url">[URL]
   <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/">URL Standard</a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</a>
   <dt id="biblio-webidl">[WEBIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/system-state.html#navigator" id="ref-for-navigator②"><c- g>Navigator</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#mediasession" id="ref-for-mediasession⑨①"><c- n>MediaSession</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="MediaSession" href="#dom-navigator-mediasession" id="ref-for-dom-navigator-mediasession①"><c- g>mediaSession</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-mediasessionplaybackstate"><code><c- g>MediaSessionPlaybackState</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-none" id="ref-for-dom-mediasessionplaybackstate-none②"><c- s>"none"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-paused" id="ref-for-dom-mediasessionplaybackstate-paused②①"><c- s>"paused"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionplaybackstate-playing" id="ref-for-dom-mediasessionplaybackstate-playing⑤①"><c- s>"playing"</c-></a>
};

<c- b>enum</c-> <a href="#enumdef-mediasessionaction"><code><c- g>MediaSessionAction</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-play" id="ref-for-dom-mediasessionaction-play⑥①"><c- s>"play"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-pause" id="ref-for-dom-mediasessionaction-pause⑦①"><c- s>"pause"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekbackward" id="ref-for-dom-mediasessionaction-seekbackward①①"><c- s>"seekbackward"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekforward" id="ref-for-dom-mediasessionaction-seekforward①①"><c- s>"seekforward"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-previoustrack" id="ref-for-dom-mediasessionaction-previoustrack①"><c- s>"previoustrack"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-nexttrack" id="ref-for-dom-mediasessionaction-nexttrack①"><c- s>"nexttrack"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-skipad" id="ref-for-dom-mediasessionaction-skipad①"><c- s>"skipad"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-stop" id="ref-for-dom-mediasessionaction-stop①"><c- s>"stop"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-mediasessionaction-seekto" id="ref-for-dom-mediasessionaction-seekto①①"><c- s>"seekto"</c-></a>
};

<c- b>callback</c-> <a href="#callbackdef-mediasessionactionhandler"><code><c- g>MediaSessionActionHandler</c-></code></a> = <c- b>void</c->(<a class="n" data-link-type="idl-name" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails①①"><c- n>MediaSessionActionDetails</c-></a> <a href="#dom-mediasessionactionhandler-details"><code><c- g>details</c-></code></a>);

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#mediasession"><code><c- g>MediaSession</c-></code></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#mediametadata" id="ref-for-mediametadata⑥①"><c- n>MediaMetadata</c-></a>? <a class="idl-code" data-link-type="attribute" data-type="MediaMetadata?" href="#dom-mediasession-metadata" id="ref-for-dom-mediasession-metadata③①"><c- g>metadata</c-></a>;

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-mediasessionplaybackstate" id="ref-for-enumdef-mediasessionplaybackstate③"><c- n>MediaSessionPlaybackState</c-></a> <a class="idl-code" data-link-type="attribute" data-type="MediaSessionPlaybackState" href="#dom-mediasession-playbackstate" id="ref-for-dom-mediasession-playbackstate③①"><c- g>playbackState</c-></a>;

  <c- b>void</c-> <a href="#dom-mediasession-setactionhandler"><code><c- g>setActionHandler</c-></code></a>(<a class="n" data-link-type="idl-name" href="#enumdef-mediasessionaction" id="ref-for-enumdef-mediasessionaction①①"><c- n>MediaSessionAction</c-></a> <a href="#dom-mediasession-setactionhandler-action-handler-action"><code><c- g>action</c-></code></a>, <a class="n" data-link-type="idl-name" href="#callbackdef-mediasessionactionhandler" id="ref-for-callbackdef-mediasessionactionhandler③①"><c- n>MediaSessionActionHandler</c-></a>? <a href="#dom-mediasession-setactionhandler-action-handler-handler"><code><c- g>handler</c-></code></a>);

  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-mediasession-setpositionstate" id="ref-for-dom-mediasession-setpositionstate①"><c- g>setPositionState</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-mediapositionstate" id="ref-for-dictdef-mediapositionstate①①"><c- n>MediaPositionState</c-></a> <a href="#dom-mediasession-setpositionstate-state-state"><code><c- g>state</c-></code></a> = {});
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#mediametadata"><code><c- g>MediaMetadata</c-></code></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-mediametadata-mediametadata" id="ref-for-dom-mediametadata-mediametadata①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-mediametadatainit" id="ref-for-dictdef-mediametadatainit①"><c- n>MediaMetadataInit</c-></a> <a href="#dom-mediametadata-mediametadata-init-init"><code><c- g>init</c-></code></a> = {});
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-mediametadata-title" id="ref-for-dom-mediametadata-title②"><c- g>title</c-></a>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-mediametadata-artist" id="ref-for-dom-mediametadata-artist②"><c- g>artist</c-></a>;
  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-type="DOMString" href="#dom-mediametadata-album" id="ref-for-dom-mediametadata-album②"><c- g>album</c-></a>;
  <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage①①"><c- n>MediaImage</c-></a>> <a class="idl-code" data-link-type="attribute" data-type="FrozenArray<MediaImage>" href="#dom-mediametadata-artwork" id="ref-for-dom-mediametadata-artwork②①"><c- g>artwork</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-mediametadatainit"><code><c- g>MediaMetadataInit</c-></code></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-mediametadatainit-title"><code><c- g>title</c-></code></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-mediametadatainit-artist"><code><c- g>artist</c-></code></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-mediametadatainit-album"><code><c- g>album</c-></code></a> = "";
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-mediaimage" id="ref-for-dictdef-mediaimage①②"><c- n>MediaImage</c-></a>> <a data-default="[]" data-type="sequence<MediaImage> " href="#dom-mediametadatainit-artwork"><code><c- g>artwork</c-></code></a> = [];
};

<c- b>dictionary</c-> <a href="#dictdef-mediaimage"><code><c- g>MediaImage</c-></code></a> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString①"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="USVString " href="#dom-mediaimage-src" id="ref-for-dom-mediaimage-src⑤①"><c- g>src</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-mediaimage-sizes" id="ref-for-dom-mediaimage-sizes④①"><c- g>sizes</c-></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦①"><c- b>DOMString</c-></a> <a class="idl-code" data-default="&quot;&quot;" data-link-type="dict-member" data-type="DOMString " href="#dom-mediaimage-type" id="ref-for-dom-mediaimage-type④①"><c- g>type</c-></a> = "";
};

<c- b>dictionary</c-> <a href="#dictdef-mediapositionstate"><code><c- g>MediaPositionState</c-></code></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double⑤"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediapositionstate-duration" id="ref-for-dom-mediapositionstate-duration③①"><c- g>duration</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double①①"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediapositionstate-playbackrate" id="ref-for-dom-mediapositionstate-playbackrate②①"><c- g>playbackRate</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double②①"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediapositionstate-position" id="ref-for-dom-mediapositionstate-position②①"><c- g>position</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-mediasessionactiondetails"><code><c- g>MediaSessionActionDetails</c-></code></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#enumdef-mediasessionaction" id="ref-for-enumdef-mediasessionaction②①"><c- n>MediaSessionAction</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="MediaSessionAction " href="#dom-mediasessionactiondetails-action" id="ref-for-dom-mediasessionactiondetails-action①"><c- g>action</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-mediasessionseekactiondetails"><code><c- g>MediaSessionSeekActionDetails</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails③①"><c- n>MediaSessionActionDetails</c-></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double③①"><c- b>double</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="double? " href="#dom-mediasessionseekactiondetails-seekoffset" id="ref-for-dom-mediasessionseekactiondetails-seekoffset①"><c- g>seekOffset</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-mediasessionseektoactiondetails"><code><c- g>MediaSessionSeekToActionDetails</c-></code></a> : <a class="n" data-link-type="idl-name" href="#dictdef-mediasessionactiondetails" id="ref-for-dictdef-mediasessionactiondetails④①"><c- n>MediaSessionActionDetails</c-></a> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-double" id="ref-for-idl-double④①"><c- b>double</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="double " href="#dom-mediasessionseektoactiondetails-seektime" id="ref-for-dom-mediasessionseektoactiondetails-seektime①"><c- g>seekTime</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a>? <a class="idl-code" data-link-type="dict-member" data-type="boolean? " href="#dom-mediasessionseektoactiondetails-fastseek" id="ref-for-dom-mediasessionseektoactiondetails-fastseek①"><c- g>fastSeek</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="guessed-playback-state">
   <b><a href="#guessed-playback-state">#guessed-playback-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-guessed-playback-state">5.1. Playback State</a> <a href="#ref-for-guessed-playback-state①">(2)</a> <a href="#ref-for-guessed-playback-state②">(3)</a> <a href="#ref-for-guessed-playback-state③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="actual-playback-state">
   <b><a href="#actual-playback-state">#actual-playback-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-actual-playback-state">5.1. Playback State</a> <a href="#ref-for-actual-playback-state①">(2)</a>
    <li><a href="#ref-for-actual-playback-state②">5.4. Actions</a> <a href="#ref-for-actual-playback-state③">(2)</a>
    <li><a href="#ref-for-actual-playback-state④">5.5. Position State</a>
    <li><a href="#ref-for-actual-playback-state⑤">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="active-media-session">
   <b><a href="#active-media-session">#active-media-session</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-active-media-session">4.3. Media Session Actions</a>
    <li><a href="#ref-for-active-media-session①">5.1. Playback State</a> <a href="#ref-for-active-media-session②">(2)</a>
    <li><a href="#ref-for-active-media-session③">5.2. Routing</a> <a href="#ref-for-active-media-session④">(2)</a> <a href="#ref-for-active-media-session⑤">(3)</a> <a href="#ref-for-active-media-session⑥">(4)</a>
    <li><a href="#ref-for-active-media-session⑦">5.3. Metadata</a> <a href="#ref-for-active-media-session⑧">(2)</a> <a href="#ref-for-active-media-session⑨">(3)</a> <a href="#ref-for-active-media-session①⓪">(4)</a> <a href="#ref-for-active-media-session①①">(5)</a> <a href="#ref-for-active-media-session①②">(6)</a> <a href="#ref-for-active-media-session①③">(7)</a> <a href="#ref-for-active-media-session①④">(8)</a>
    <li><a href="#ref-for-active-media-session①⑤">5.4. Actions</a> <a href="#ref-for-active-media-session①⑥">(2)</a> <a href="#ref-for-active-media-session①⑦">(3)</a> <a href="#ref-for-active-media-session①⑧">(4)</a> <a href="#ref-for-active-media-session①⑨">(5)</a> <a href="#ref-for-active-media-session②⓪">(6)</a> <a href="#ref-for-active-media-session②①">(7)</a> <a href="#ref-for-active-media-session②②">(8)</a> <a href="#ref-for-active-media-session②③">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="audio-focus">
   <b><a href="#audio-focus">#audio-focus</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-audio-focus">5.2. Routing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-metadata-algorithm">
   <b><a href="#update-metadata-algorithm">#update-metadata-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-metadata-algorithm">5.2. Routing</a>
    <li><a href="#ref-for-update-metadata-algorithm①">6. The MediaSession interface</a>
    <li><a href="#ref-for-update-metadata-algorithm②">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fetch-image-algorithm">
   <b><a href="#fetch-image-algorithm">#fetch-image-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fetch-image-algorithm">5.3. Metadata</a> <a href="#ref-for-fetch-image-algorithm①">(2)</a> <a href="#ref-for-fetch-image-algorithm②">(3)</a> <a href="#ref-for-fetch-image-algorithm③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="preferred-artwork-image">
   <b><a href="#preferred-artwork-image">#preferred-artwork-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-preferred-artwork-image">5.3. Metadata</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="media-session-action">
   <b><a href="#media-session-action">#media-session-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-session-action">4.3. Media Session Actions</a>
    <li><a href="#ref-for-media-session-action①">5.4. Actions</a> <a href="#ref-for-media-session-action②">(2)</a> <a href="#ref-for-media-session-action③">(3)</a> <a href="#ref-for-media-session-action④">(4)</a> <a href="#ref-for-media-session-action⑤">(5)</a> <a href="#ref-for-media-session-action⑥">(6)</a> <a href="#ref-for-media-session-action⑦">(7)</a> <a href="#ref-for-media-session-action⑧">(8)</a>
    <li><a href="#ref-for-media-session-action⑨">11. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="media-session-action-source">
   <b><a href="#media-session-action-source">#media-session-action-source</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-session-action-source">5.4. Actions</a> <a href="#ref-for-media-session-action-source①">(2)</a> <a href="#ref-for-media-session-action-source②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-play">
   <b><a href="#dom-mediasessionaction-play">#dom-mediasessionaction-play</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-play">5.1. Playback State</a> <a href="#ref-for-dom-mediasessionaction-play①">(2)</a>
    <li><a href="#ref-for-dom-mediasessionaction-play②">5.4. Actions</a> <a href="#ref-for-dom-mediasessionaction-play③">(2)</a> <a href="#ref-for-dom-mediasessionaction-play④">(3)</a> <a href="#ref-for-dom-mediasessionaction-play⑤">(4)</a>
    <li><a href="#ref-for-dom-mediasessionaction-play⑥">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-pause">
   <b><a href="#dom-mediasessionaction-pause">#dom-mediasessionaction-pause</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-pause">5.1. Playback State</a> <a href="#ref-for-dom-mediasessionaction-pause①">(2)</a> <a href="#ref-for-dom-mediasessionaction-pause②">(3)</a>
    <li><a href="#ref-for-dom-mediasessionaction-pause③">5.4. Actions</a> <a href="#ref-for-dom-mediasessionaction-pause④">(2)</a> <a href="#ref-for-dom-mediasessionaction-pause⑤">(3)</a> <a href="#ref-for-dom-mediasessionaction-pause⑥">(4)</a>
    <li><a href="#ref-for-dom-mediasessionaction-pause⑦">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-seekbackward">
   <b><a href="#dom-mediasessionaction-seekbackward">#dom-mediasessionaction-seekbackward</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-seekbackward">5.4. Actions</a>
    <li><a href="#ref-for-dom-mediasessionaction-seekbackward①">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-seekforward">
   <b><a href="#dom-mediasessionaction-seekforward">#dom-mediasessionaction-seekforward</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-seekforward">5.4. Actions</a>
    <li><a href="#ref-for-dom-mediasessionaction-seekforward①">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-previoustrack">
   <b><a href="#dom-mediasessionaction-previoustrack">#dom-mediasessionaction-previoustrack</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-previoustrack">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-nexttrack">
   <b><a href="#dom-mediasessionaction-nexttrack">#dom-mediasessionaction-nexttrack</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-nexttrack">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-skipad">
   <b><a href="#dom-mediasessionaction-skipad">#dom-mediasessionaction-skipad</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-skipad">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-stop">
   <b><a href="#dom-mediasessionaction-stop">#dom-mediasessionaction-stop</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-stop">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionaction-seekto">
   <b><a href="#dom-mediasessionaction-seekto">#dom-mediasessionaction-seekto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionaction-seekto">5.4. Actions</a>
    <li><a href="#ref-for-dom-mediasessionaction-seekto①">6. The MediaSession interface</a>
    <li><a href="#ref-for-dom-mediasessionaction-seekto②">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="supported-media-session-actions">
   <b><a href="#supported-media-session-actions">#supported-media-session-actions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supported-media-session-actions">5.4. Actions</a> <a href="#ref-for-supported-media-session-actions①">(2)</a> <a href="#ref-for-supported-media-session-actions②">(3)</a> <a href="#ref-for-supported-media-session-actions③">(4)</a> <a href="#ref-for-supported-media-session-actions④">(5)</a> <a href="#ref-for-supported-media-session-actions⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="update-action-handler-algorithm">
   <b><a href="#update-action-handler-algorithm">#update-action-handler-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-action-handler-algorithm">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="handle-media-session-action">
   <b><a href="#handle-media-session-action">#handle-media-session-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-handle-media-session-action">5.4. Actions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="media-session-actions-update-algorithm">
   <b><a href="#media-session-actions-update-algorithm">#media-session-actions-update-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-media-session-actions-update-algorithm">5.1. Playback State</a>
    <li><a href="#ref-for-media-session-actions-update-algorithm①">5.2. Routing</a>
    <li><a href="#ref-for-media-session-actions-update-algorithm②">5.4. Actions</a> <a href="#ref-for-media-session-actions-update-algorithm③">(2)</a>
    <li><a href="#ref-for-media-session-actions-update-algorithm④">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="position-state①">
   <b><a href="#position-state①">#position-state①</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-position-state①">5.5. Position State</a> <a href="#ref-for-position-state①①">(2)</a> <a href="#ref-for-position-state①②">(3)</a> <a href="#ref-for-position-state①③">(4)</a>
    <li><a href="#ref-for-position-state①④">6. The MediaSession interface</a> <a href="#ref-for-position-state①⑤">(2)</a>
    <li><a href="#ref-for-position-state①⑥">11. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="duration">
   <b><a href="#duration">#duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-duration">5.5. Position State</a> <a href="#ref-for-duration①">(2)</a> <a href="#ref-for-duration②">(3)</a>
    <li><a href="#ref-for-duration③">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="playback-rate">
   <b><a href="#playback-rate">#playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-playback-rate">5.5. Position State</a>
    <li><a href="#ref-for-playback-rate①">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="last-reported-playback-position">
   <b><a href="#last-reported-playback-position">#last-reported-playback-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-last-reported-playback-position">5.5. Position State</a>
    <li><a href="#ref-for-last-reported-playback-position①">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="last-position-updated-time">
   <b><a href="#last-position-updated-time">#last-position-updated-time</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-last-position-updated-time">5.5. Position State</a>
    <li><a href="#ref-for-last-position-updated-time①">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="actual-playback-rate">
   <b><a href="#actual-playback-rate">#actual-playback-rate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-actual-playback-rate">5.5. Position State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-playback-position">
   <b><a href="#current-playback-position">#current-playback-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-playback-position">5.5. Position State</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-mediasessionplaybackstate">
   <b><a href="#enumdef-mediasessionplaybackstate">#enumdef-mediasessionplaybackstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-mediasessionplaybackstate">6. The MediaSession interface</a> <a href="#ref-for-enumdef-mediasessionplaybackstate①">(2)</a> <a href="#ref-for-enumdef-mediasessionplaybackstate②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-mediasessionaction">
   <b><a href="#enumdef-mediasessionaction">#enumdef-mediasessionaction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-mediasessionaction">5.4. Actions</a>
    <li><a href="#ref-for-enumdef-mediasessionaction①">6. The MediaSession interface</a>
    <li><a href="#ref-for-enumdef-mediasessionaction②">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-mediasessionactionhandler">
   <b><a href="#callbackdef-mediasessionactionhandler">#callbackdef-mediasessionactionhandler</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-mediasessionactionhandler">5.4. Actions</a> <a href="#ref-for-callbackdef-mediasessionactionhandler①">(2)</a> <a href="#ref-for-callbackdef-mediasessionactionhandler②">(3)</a>
    <li><a href="#ref-for-callbackdef-mediasessionactionhandler③">6. The MediaSession interface</a>
    <li><a href="#ref-for-callbackdef-mediasessionactionhandler④">10. The
MediaSessionActionDetails dictionary</a> <a href="#ref-for-callbackdef-mediasessionactionhandler⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediasession">
   <b><a href="#mediasession">#mediasession</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediasession">5.2. Routing</a> <a href="#ref-for-mediasession①">(2)</a> <a href="#ref-for-mediasession②">(3)</a>
    <li><a href="#ref-for-mediasession③">5.4. Actions</a> <a href="#ref-for-mediasession④">(2)</a> <a href="#ref-for-mediasession⑤">(3)</a> <a href="#ref-for-mediasession⑥">(4)</a> <a href="#ref-for-mediasession⑦">(5)</a>
    <li><a href="#ref-for-mediasession⑧">6. The MediaSession interface</a> <a href="#ref-for-mediasession⑨">(2)</a> <a href="#ref-for-mediasession①⓪">(3)</a> <a href="#ref-for-mediasession①①">(4)</a> <a href="#ref-for-mediasession①②">(5)</a> <a href="#ref-for-mediasession①③">(6)</a> <a href="#ref-for-mediasession①④">(7)</a> <a href="#ref-for-mediasession①⑤">(8)</a> <a href="#ref-for-mediasession①⑥">(9)</a> <a href="#ref-for-mediasession①⑦">(10)</a> <a href="#ref-for-mediasession①⑧">(11)</a> <a href="#ref-for-mediasession①⑨">(12)</a>
    <li><a href="#ref-for-mediasession②⓪">7. The MediaMetadata interface</a>
    <li><a href="#ref-for-mediasession②①">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediasession-metadata">
   <b><a href="#mediasession-metadata">#mediasession-metadata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediasession-metadata">6. The MediaSession interface</a> <a href="#ref-for-mediasession-metadata①">(2)</a> <a href="#ref-for-mediasession-metadata②">(3)</a> <a href="#ref-for-mediasession-metadata③">(4)</a> <a href="#ref-for-mediasession-metadata④">(5)</a>
    <li><a href="#ref-for-mediasession-metadata⑤">11. Examples</a> <a href="#ref-for-mediasession-metadata⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-navigator-mediasession">
   <b><a href="#dom-navigator-mediasession">#dom-navigator-mediasession</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-navigator-mediasession">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasession-metadata">
   <b><a href="#dom-mediasession-metadata">#dom-mediasession-metadata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasession-metadata">5.3. Metadata</a> <a href="#ref-for-dom-mediasession-metadata①">(2)</a> <a href="#ref-for-dom-mediasession-metadata②">(3)</a>
    <li><a href="#ref-for-dom-mediasession-metadata③">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasession-playbackstate">
   <b><a href="#dom-mediasession-playbackstate">#dom-mediasession-playbackstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasession-playbackstate">5.1. Playback State</a> <a href="#ref-for-dom-mediasession-playbackstate①">(2)</a>
    <li><a href="#ref-for-dom-mediasession-playbackstate②">5.2. Routing</a>
    <li><a href="#ref-for-dom-mediasession-playbackstate③">6. The MediaSession interface</a> <a href="#ref-for-dom-mediasession-playbackstate④">(2)</a> <a href="#ref-for-dom-mediasession-playbackstate⑤">(3)</a> <a href="#ref-for-dom-mediasession-playbackstate⑥">(4)</a>
    <li><a href="#ref-for-dom-mediasession-playbackstate⑦">11. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="declared-playback-state">
   <b><a href="#declared-playback-state">#declared-playback-state</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-declared-playback-state">5.1. Playback State</a> <a href="#ref-for-declared-playback-state①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionplaybackstate-none">
   <b><a href="#dom-mediasessionplaybackstate-none">#dom-mediasessionplaybackstate-none</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-none">6. The MediaSession interface</a> <a href="#ref-for-dom-mediasessionplaybackstate-none①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionplaybackstate-playing">
   <b><a href="#dom-mediasessionplaybackstate-playing">#dom-mediasessionplaybackstate-playing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-playing">5.1. Playback State</a> <a href="#ref-for-dom-mediasessionplaybackstate-playing①">(2)</a> <a href="#ref-for-dom-mediasessionplaybackstate-playing②">(3)</a>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-playing③">5.4. Actions</a> <a href="#ref-for-dom-mediasessionplaybackstate-playing④">(2)</a>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-playing⑤">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionplaybackstate-paused">
   <b><a href="#dom-mediasessionplaybackstate-paused">#dom-mediasessionplaybackstate-paused</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-paused">5.1. Playback State</a>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-paused①">5.5. Position State</a>
    <li><a href="#ref-for-dom-mediasessionplaybackstate-paused②">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasession-setpositionstate">
   <b><a href="#dom-mediasession-setpositionstate">#dom-mediasession-setpositionstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasession-setpositionstate">6. The MediaSession interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediametadata">
   <b><a href="#mediametadata">#mediametadata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediametadata">4.1. User interface guidelines</a> <a href="#ref-for-mediametadata①">(2)</a> <a href="#ref-for-mediametadata②">(3)</a> <a href="#ref-for-mediametadata③">(4)</a> <a href="#ref-for-mediametadata④">(5)</a>
    <li><a href="#ref-for-mediametadata⑤">4.2. Incognito mode</a>
    <li><a href="#ref-for-mediametadata⑥">6. The MediaSession interface</a> <a href="#ref-for-mediametadata⑦">(2)</a>
    <li><a href="#ref-for-mediametadata⑧">7. The MediaMetadata interface</a> <a href="#ref-for-mediametadata⑨">(2)</a> <a href="#ref-for-mediametadata①⓪">(3)</a> <a href="#ref-for-mediametadata①①">(4)</a> <a href="#ref-for-mediametadata①②">(5)</a> <a href="#ref-for-mediametadata①③">(6)</a> <a href="#ref-for-mediametadata①④">(7)</a> <a href="#ref-for-mediametadata①⑤">(8)</a> <a href="#ref-for-mediametadata①⑥">(9)</a> <a href="#ref-for-mediametadata①⑦">(10)</a> <a href="#ref-for-mediametadata①⑧">(11)</a> <a href="#ref-for-mediametadata①⑨">(12)</a> <a href="#ref-for-mediametadata②⓪">(13)</a> <a href="#ref-for-mediametadata②①">(14)</a> <a href="#ref-for-mediametadata②②">(15)</a> <a href="#ref-for-mediametadata②③">(16)</a> <a href="#ref-for-mediametadata②④">(17)</a> <a href="#ref-for-mediametadata②⑤">(18)</a> <a href="#ref-for-mediametadata②⑥">(19)</a> <a href="#ref-for-mediametadata②⑦">(20)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediametadatainit">
   <b><a href="#dictdef-mediametadatainit">#dictdef-mediametadatainit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediametadatainit">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadatainit-title">
   <b><a href="#dom-mediametadatainit-title">#dom-mediametadatainit-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadatainit-title">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadatainit-artist">
   <b><a href="#dom-mediametadatainit-artist">#dom-mediametadatainit-artist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadatainit-artist">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadatainit-album">
   <b><a href="#dom-mediametadatainit-album">#dom-mediametadatainit-album</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadatainit-album">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadatainit-artwork">
   <b><a href="#dom-mediametadatainit-artwork">#dom-mediametadatainit-artwork</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadatainit-artwork">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediametadatainit-artwork①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediametadata-media-session">
   <b><a href="#mediametadata-media-session">#mediametadata-media-session</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediametadata-media-session">6. The MediaSession interface</a> <a href="#ref-for-mediametadata-media-session①">(2)</a> <a href="#ref-for-mediametadata-media-session②">(3)</a>
    <li><a href="#ref-for-mediametadata-media-session③">7. The MediaMetadata interface</a> <a href="#ref-for-mediametadata-media-session④">(2)</a>
    <li><a href="#ref-for-mediametadata-media-session⑤">11. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediametadata-title">
   <b><a href="#mediametadata-title">#mediametadata-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediametadata-title">7. The MediaMetadata interface</a> <a href="#ref-for-mediametadata-title①">(2)</a> <a href="#ref-for-mediametadata-title②">(3)</a> <a href="#ref-for-mediametadata-title③">(4)</a> <a href="#ref-for-mediametadata-title④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediametadata-artist">
   <b><a href="#mediametadata-artist">#mediametadata-artist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediametadata-artist">7. The MediaMetadata interface</a> <a href="#ref-for-mediametadata-artist①">(2)</a> <a href="#ref-for-mediametadata-artist②">(3)</a> <a href="#ref-for-mediametadata-artist③">(4)</a> <a href="#ref-for-mediametadata-artist④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediametadata-album">
   <b><a href="#mediametadata-album">#mediametadata-album</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediametadata-album">7. The MediaMetadata interface</a> <a href="#ref-for-mediametadata-album①">(2)</a> <a href="#ref-for-mediametadata-album②">(3)</a> <a href="#ref-for-mediametadata-album③">(4)</a> <a href="#ref-for-mediametadata-album④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="mediametadata-artwork-images">
   <b><a href="#mediametadata-artwork-images">#mediametadata-artwork-images</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mediametadata-artwork-images">5.3. Metadata</a>
    <li><a href="#ref-for-mediametadata-artwork-images①">7. The MediaMetadata interface</a> <a href="#ref-for-mediametadata-artwork-images②">(2)</a> <a href="#ref-for-mediametadata-artwork-images③">(3)</a> <a href="#ref-for-mediametadata-artwork-images④">(4)</a> <a href="#ref-for-mediametadata-artwork-images⑤">(5)</a> <a href="#ref-for-mediametadata-artwork-images⑥">(6)</a>
    <li><a href="#ref-for-mediametadata-artwork-images⑦">11. Examples</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="empty-metadata">
   <b><a href="#empty-metadata">#empty-metadata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-empty-metadata">5.3. Metadata</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadata-mediametadata">
   <b><a href="#dom-mediametadata-mediametadata">#dom-mediametadata-mediametadata</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadata-mediametadata">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="convert-artwork-algorithm">
   <b><a href="#convert-artwork-algorithm">#convert-artwork-algorithm</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-convert-artwork-algorithm">7. The MediaMetadata interface</a> <a href="#ref-for-convert-artwork-algorithm①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadata-title">
   <b><a href="#dom-mediametadata-title">#dom-mediametadata-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadata-title">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediametadata-title①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadata-artist">
   <b><a href="#dom-mediametadata-artist">#dom-mediametadata-artist</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadata-artist">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediametadata-artist①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadata-album">
   <b><a href="#dom-mediametadata-album">#dom-mediametadata-album</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadata-album">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediametadata-album①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediametadata-artwork">
   <b><a href="#dom-mediametadata-artwork">#dom-mediametadata-artwork</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediametadata-artwork">5.3. Metadata</a> <a href="#ref-for-dom-mediametadata-artwork①">(2)</a>
    <li><a href="#ref-for-dom-mediametadata-artwork②">7. The MediaMetadata interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediaimage">
   <b><a href="#dictdef-mediaimage">#dictdef-mediaimage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediaimage">7. The MediaMetadata interface</a> <a href="#ref-for-dictdef-mediaimage①">(2)</a> <a href="#ref-for-dictdef-mediaimage②">(3)</a> <a href="#ref-for-dictdef-mediaimage③">(4)</a> <a href="#ref-for-dictdef-mediaimage④">(5)</a> <a href="#ref-for-dictdef-mediaimage⑤">(6)</a>
    <li><a href="#ref-for-dictdef-mediaimage⑥">8. The MediaImage dictionary</a> <a href="#ref-for-dictdef-mediaimage⑦">(2)</a> <a href="#ref-for-dictdef-mediaimage⑧">(3)</a> <a href="#ref-for-dictdef-mediaimage⑨">(4)</a> <a href="#ref-for-dictdef-mediaimage①⓪">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediaimage-src">
   <b><a href="#dom-mediaimage-src">#dom-mediaimage-src</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediaimage-src">5.3. Metadata</a>
    <li><a href="#ref-for-dom-mediaimage-src①">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediaimage-src②">(2)</a> <a href="#ref-for-dom-mediaimage-src③">(3)</a> <a href="#ref-for-dom-mediaimage-src④">(4)</a>
    <li><a href="#ref-for-dom-mediaimage-src⑤">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediaimage-sizes">
   <b><a href="#dom-mediaimage-sizes">#dom-mediaimage-sizes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediaimage-sizes">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediaimage-sizes①">(2)</a> <a href="#ref-for-dom-mediaimage-sizes②">(3)</a> <a href="#ref-for-dom-mediaimage-sizes③">(4)</a>
    <li><a href="#ref-for-dom-mediaimage-sizes④">8. The MediaImage dictionary</a> <a href="#ref-for-dom-mediaimage-sizes⑤">(2)</a> <a href="#ref-for-dom-mediaimage-sizes⑥">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediaimage-type">
   <b><a href="#dom-mediaimage-type">#dom-mediaimage-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediaimage-type">7. The MediaMetadata interface</a> <a href="#ref-for-dom-mediaimage-type①">(2)</a> <a href="#ref-for-dom-mediaimage-type②">(3)</a> <a href="#ref-for-dom-mediaimage-type③">(4)</a>
    <li><a href="#ref-for-dom-mediaimage-type④">8. The MediaImage dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediapositionstate">
   <b><a href="#dictdef-mediapositionstate">#dictdef-mediapositionstate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediapositionstate">5.5. Position State</a>
    <li><a href="#ref-for-dictdef-mediapositionstate①">6. The MediaSession interface</a>
    <li><a href="#ref-for-dictdef-mediapositionstate②">9. The MediaPositionState
dictionary</a> <a href="#ref-for-dictdef-mediapositionstate③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediapositionstate-duration">
   <b><a href="#dom-mediapositionstate-duration">#dom-mediapositionstate-duration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediapositionstate-duration">6. The MediaSession interface</a> <a href="#ref-for-dom-mediapositionstate-duration①">(2)</a> <a href="#ref-for-dom-mediapositionstate-duration②">(3)</a>
    <li><a href="#ref-for-dom-mediapositionstate-duration③">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediapositionstate-playbackrate">
   <b><a href="#dom-mediapositionstate-playbackrate">#dom-mediapositionstate-playbackrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediapositionstate-playbackrate">6. The MediaSession interface</a> <a href="#ref-for-dom-mediapositionstate-playbackrate①">(2)</a>
    <li><a href="#ref-for-dom-mediapositionstate-playbackrate②">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediapositionstate-position">
   <b><a href="#dom-mediapositionstate-position">#dom-mediapositionstate-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediapositionstate-position">6. The MediaSession interface</a> <a href="#ref-for-dom-mediapositionstate-position①">(2)</a>
    <li><a href="#ref-for-dom-mediapositionstate-position②">9. The MediaPositionState
dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediasessionactiondetails">
   <b><a href="#dictdef-mediasessionactiondetails">#dictdef-mediasessionactiondetails</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediasessionactiondetails">5.4. Actions</a>
    <li><a href="#ref-for-dictdef-mediasessionactiondetails①">6. The MediaSession interface</a>
    <li><a href="#ref-for-dictdef-mediasessionactiondetails②">10. The
MediaSessionActionDetails dictionary</a> <a href="#ref-for-dictdef-mediasessionactiondetails③">(2)</a> <a href="#ref-for-dictdef-mediasessionactiondetails④">(3)</a> <a href="#ref-for-dictdef-mediasessionactiondetails⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediasessionseekactiondetails">
   <b><a href="#dictdef-mediasessionseekactiondetails">#dictdef-mediasessionseekactiondetails</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediasessionseekactiondetails">5.4. Actions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-mediasessionseektoactiondetails">
   <b><a href="#dictdef-mediasessionseektoactiondetails">#dictdef-mediasessionseektoactiondetails</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-mediasessionseektoactiondetails">5.4. Actions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionactiondetails-action">
   <b><a href="#dom-mediasessionactiondetails-action">#dom-mediasessionactiondetails-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionactiondetails-action">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionseekactiondetails-seekoffset">
   <b><a href="#dom-mediasessionseekactiondetails-seekoffset">#dom-mediasessionseekactiondetails-seekoffset</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionseekactiondetails-seekoffset">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionseektoactiondetails-seektime">
   <b><a href="#dom-mediasessionseektoactiondetails-seektime">#dom-mediasessionseektoactiondetails-seektime</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionseektoactiondetails-seektime">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-mediasessionseektoactiondetails-fastseek">
   <b><a href="#dom-mediasessionseektoactiondetails-fastseek">#dom-mediasessionseektoactiondetails-fastseek</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-mediasessionseektoactiondetails-fastseek">10. The
MediaSessionActionDetails dictionary</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>